New website nav menu.

assets/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 48 48"><path d="M7.5 40.018v-10.5c0-1.379-1.12-2.5-2.5-2.5s-2.5 1.121-2.5 2.5v11a4.5 4.5 0 0 0 4.5 4.5h12a2.5 2.5 0 0 0 0-5zm33 0H29a2.5 2.5 0 0 0 0 5h12a4.5 4.5 0 0 0 4.5-4.5v-11c0-1.379-1.12-2.5-2.5-2.5s-2.5 1.121-2.5 2.5zm-33-33H19a2.5 2.5 0 0 0 0-5H7a4.5 4.5 0 0 0-4.5 4.5v11a2.5 2.5 0 0 0 5 0zm33 0v10.5a2.5 2.5 0 0 0 5 0v-11a4.5 4.5 0 0 0-4.5-4.5H29a2.5 2.5 0 0 0 0 5z"/></svg>

assets/lightbulb.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512"><path d="M223.718 124.76c-48.027 11.198-86.688 49.285-98.494 97.031-11.843 47.899 1.711 96.722 36.259 130.601C173.703 364.377 181 383.586 181 403.777V407c0 13.296 5.801 25.26 15 33.505V467c0 24.813 20.187 45 45 45h30c24.813 0 45-20.187 45-45v-26.495c9.199-8.245 15-20.208 15-33.505v-3.282c0-19.884 7.687-39.458 20.563-52.361C376.994 325.87 391 292.005 391 256c0-86.079-79.769-151.638-167.282-131.24zM286 467c0 8.271-6.729 15-15 15h-30c-8.271 0-15-6.729-15-15v-15h60v15zm44.326-136.834C311.689 348.843 301 375.651 301 403.718V407c0 8.271-6.729 15-15 15h-60c-8.271 0-15-6.729-15-15v-3.223c0-28.499-10.393-55.035-28.513-72.804-26.89-26.37-37.409-64.493-28.141-101.981 9.125-36.907 39.029-66.353 76.184-75.015C299.202 137.964 361 189.228 361 256c0 28.004-10.894 54.343-30.674 74.166zM139.327 118.114 96.9 75.688c-5.857-5.858-15.355-5.858-21.213 0-5.858 5.858-5.858 15.355 0 21.213l42.427 42.426c5.857 5.858 15.356 5.858 21.213 0 5.858-5.858 5.858-15.355 0-21.213zM76 241H15c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15zM497 241h-61c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15zM436.313 75.688c-5.856-5.858-15.354-5.858-21.213 0l-42.427 42.426c-5.858 5.857-5.858 15.355 0 21.213 5.857 5.858 15.355 5.858 21.213 0l42.427-42.426c5.858-5.857 5.858-15.355 0-21.213zM256 0c-8.284 0-15 6.716-15 15v61c0 8.284 6.716 15 15 15s15-6.716 15-15V15c0-8.284-6.716-15-15-15z"/><path d="M256 181c-6.166 0-12.447.739-18.658 2.194-25.865 6.037-47.518 27.328-53.879 52.979-1.994 8.041 2.907 16.175 10.947 18.17 8.042 1.994 16.176-2.909 18.17-10.948 3.661-14.758 16.647-27.5 31.593-30.989 3.982-.933 7.962-1.406 11.827-1.406 8.284 0 15-6.716 15-15s-6.716-15-15-15z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512"><path d="M223.718 124.76c-48.027 11.198-86.688 49.285-98.494 97.031-11.843 47.899 1.711 96.722 36.259 130.601C173.703 364.377 181 383.586 181 403.777V407c0 13.296 5.801 25.26 15 33.505V467c0 24.813 20.187 45 45 45h30c24.813 0 45-20.187 45-45v-26.495c9.199-8.245 15-20.208 15-33.505v-3.282c0-19.884 7.687-39.458 20.563-52.361C376.994 325.87 391 292.005 391 256c0-86.079-79.769-151.638-167.282-131.24zM286 467c0 8.271-6.729 15-15 15h-30c-8.271 0-15-6.729-15-15v-15h60v15zm44.326-136.834C311.689 348.843 301 375.651 301 403.718V407c0 8.271-6.729 15-15 15h-60c-8.271 0-15-6.729-15-15v-3.223c0-28.499-10.393-55.035-28.513-72.804-26.89-26.37-37.409-64.493-28.141-101.981 9.125-36.907 39.029-66.353 76.184-75.015C299.202 137.964 361 189.228 361 256c0 28.004-10.894 54.343-30.674 74.166zM139.327 118.114 96.9 75.688c-5.857-5.858-15.355-5.858-21.213 0-5.858 5.858-5.858 15.355 0 21.213l42.427 42.426c5.857 5.858 15.356 5.858 21.213 0 5.858-5.858 5.858-15.355 0-21.213zM76 241H15c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15zm421 0h-61c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15zM436.313 75.688c-5.856-5.858-15.354-5.858-21.213 0l-42.427 42.426c-5.858 5.857-5.858 15.355 0 21.213 5.857 5.858 15.355 5.858 21.213 0l42.427-42.426c5.858-5.857 5.858-15.355 0-21.213zM256 0c-8.284 0-15 6.716-15 15v61c0 8.284 6.716 15 15 15s15-6.716 15-15V15c0-8.284-6.716-15-15-15z"/><path d="M256 181c-6.166 0-12.447.739-18.658 2.194-25.865 6.037-47.518 27.328-53.879 52.979-1.994 8.041 2.907 16.175 10.947 18.17 8.042 1.994 16.176-2.909 18.17-10.948 3.661-14.758 16.647-27.5 31.593-30.989 3.982-.933 7.962-1.406 11.827-1.406 8.284 0 15-6.716 15-15s-6.716-15-15-15z"/></svg>

assets/overview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512"><path d="M452 36H60C26.916 36 0 62.916 0 96v240c0 33.084 26.916 60 60 60h176v40H132v40h248v-40H276v-40h176c33.084 0 60-26.916 60-60V96c0-33.084-26.916-60-60-60zm20 300c0 11.028-8.972 20-20 20H60c-11.028 0-20-8.972-20-20V96c0-11.028 8.972-20 20-20h392c11.028 0 20 8.972 20 20v240z"/></svg>

assets/reports.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.17 18.91A32 32 0 1 0 46.4 60.54l.15-.06.16-.1a31.93 31.93 0 0 0 14.47-41.44s-.01-.02-.01-.03zm-4.53-.16L34 28.91V4.1a28 28 0 0 1 22.64 14.65zM4 32A28 28 0 0 1 30 4.1V32a1.74 1.74 0 0 0 0 .39.17.17 0 0 0 0 .07 1.49 1.49 0 0 0 .15.4l12.76 24.9A28 28 0 0 1 4 32zm42.47 23.94L34.74 33l23.54-10.6a28 28 0 0 1-11.81 33.54z"/></svg>

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;