New website nav menu.

components/icons.ts

@@ -10,7 +10,10 @@ import Globe from 'assets/globe.svg';
 import Lock from 'assets/lock.svg';
 import Logo from 'assets/logo.svg';
 import Moon from 'assets/moon.svg';
+import Nodes from 'assets/nodes.svg';
+import Overview from 'assets/overview.svg';
 import Profile from 'assets/profile.svg';
+import Reports from 'assets/reports.svg';
 import Sun from 'assets/sun.svg';
 import User from 'assets/user.svg';
 import Users from 'assets/users.svg';
@@ -29,7 +32,10 @@ const icons = {
   Lock,
   Logo,
   Moon,
+  Nodes,
+  Overview,
   Profile,
+  Reports,
   Sun,
   User,
   Users,

components/messages.js

@@ -158,6 +158,7 @@ export const labels = defineMessages({
   max: { id: 'labels.max', defaultMessage: 'Max' },
   unique: { id: 'labels.unique', defaultMessage: 'Unique' },
   value: { id: 'labels.value', defaultMessage: 'Value' },
+  overview: { id: 'labels.overview', defaultMessage: 'Overview' },
 });
 
 export const messages = defineMessages({

components/metrics/CountriesTable.js

@@ -1,13 +1,15 @@
-import MetricsTable from './MetricsTable';
+import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
+import MetricsTable from './MetricsTable';
 
 export function CountriesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: code }) {
     return (
@@ -17,7 +19,7 @@ export function CountriesTable({ websiteId, ...props }) {
         value={countryNames[code] && code}
         label={countryNames[code]}
       >
-        <img src={`/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
+        <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
       </FilterLink>
     );
   }

components/metrics/RegionsTable.js

@@ -1,15 +1,17 @@
-import MetricsTable from './MetricsTable';
-import { emptyFilter } from 'lib/filters';
+import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
+import { emptyFilter } from 'lib/filters';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 import useCountryNames from 'hooks/useCountryNames';
+import MetricsTable from './MetricsTable';
 import regions from 'public/iso-3166-2.json';
 
 export function RegionsTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
   const countryNames = useCountryNames(locale);
+  const { basePath } = useRouter();
 
   const renderLabel = x => {
     return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
@@ -18,7 +20,10 @@ export function RegionsTable({ websiteId, ...props }) {
   const renderLink = ({ x: code }) => {
     return (
       <FilterLink id="region" className={locale} value={code} label={renderLabel(code)}>
-        <img src={`/images/flags/${code?.split('-')?.[0]?.toLowerCase() || 'xx'}.png`} alt={code} />
+        <img
+          src={`${basePath}/images/flags/${code?.split('-')?.[0]?.toLowerCase() || 'xx'}.png`}
+          alt={code}
+        />
       </FilterLink>
     );
   };

components/metrics/WebsiteHeader.js

@@ -1,17 +1,38 @@
-import { Row, Column, Text } from 'react-basics';
+import { Flexbox, Row, Column, Text, Button, Icon } from 'react-basics';
 import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
+import { useMessages } from 'hooks';
+import Icons from 'components/icons';
 
 export function WebsiteHeader({ websiteId, name, domain, children }) {
+  const { formatMessage, labels } = useMessages();
+
+  const links = [
+    { label: formatMessage(labels.overview), icon: <Icons.Overview /> },
+    { label: formatMessage(labels.realtime), icon: <Icons.Clock /> },
+    { label: formatMessage(labels.reports), icon: <Icons.Reports /> },
+    { label: formatMessage(labels.eventData), icon: <Icons.Nodes /> },
+  ];
+
   return (
     <Row className={styles.header} justifyContent="center">
       <Column className={styles.title} variant="two">
         <Favicon domain={domain} />
         <Text>{name}</Text>
       </Column>
-      <Column className={styles.info} variant="two">
+      <Column className={styles.actions} variant="two">
         <ActiveUsers websiteId={websiteId} />
+        <Flexbox alignItems="center">
+          {links.map(({ label, icon }) => {
+            return (
+              <Button key={label} variant="quiet">
+                <Icon>{icon}</Icon>
+                <Text>{label}</Text>
+              </Button>
+            );
+          })}
+        </Flexbox>
         {children}
       </Column>
     </Row>

components/metrics/WebsiteHeader.module.css

@@ -15,7 +15,7 @@
   height: 100px;
 }
 
-.info {
+.actions {
   display: flex;
   flex-direction: row;
   align-items: center;