Added SideNav component.

components/pages/realtime/RealtimeHeader.module.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 
 .metrics {

components/pages/settings/websites/WebsiteAddForm.js

@@ -12,7 +12,7 @@ import { DOMAIN_REGEX } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
 
@@ -37,7 +37,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
           name="domain"
           rules={{
             required: formatMessage(labels.required),
-            pattern: { value: DOMAIN_REGEX, message: formatMessage(labels.invalidDomain) },
+            pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
           }}
         >
           <TextField autoComplete="off" />

components/pages/websites/WebsiteMenuView.js

@@ -11,10 +11,11 @@ import QueryParametersTable from 'components/metrics/QueryParametersTable';
 import ReferrersTable from 'components/metrics/ReferrersTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
-import usePageQuery from 'hooks/usePageQuery';
 import Icons from 'components/icons';
-import styles from './WebsiteMenuView.module.css';
+import SideNav from 'components/layout/SideNav';
+import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
+import styles from './WebsiteMenuView.module.css';
 
 const views = {
   url: PagesTable,
@@ -40,42 +41,52 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
     {
       key: 'url',
       label: formatMessage(labels.pages),
+      url: resolveUrl({ view: 'url' }),
     },
     {
       key: 'referrer',
       label: formatMessage(labels.referrers),
+      url: resolveUrl({ view: 'referrer' }),
     },
     {
       key: 'browser',
       label: formatMessage(labels.browsers),
+      url: resolveUrl({ view: 'browser' }),
     },
     {
       key: 'os',
       label: formatMessage(labels.os),
+      url: resolveUrl({ view: 'os' }),
     },
     {
       key: 'device',
       label: formatMessage(labels.devices),
+      url: resolveUrl({ view: 'device' }),
     },
     {
       key: 'country',
       label: formatMessage(labels.countries),
+      url: resolveUrl({ view: 'country' }),
     },
     {
       key: 'language',
       label: formatMessage(labels.languages),
+      url: resolveUrl({ view: 'language' }),
     },
     {
       key: 'screen',
       label: formatMessage(labels.screens),
+      url: resolveUrl({ view: 'screen' }),
     },
     {
       key: 'event',
       label: formatMessage(labels.events),
+      url: resolveUrl({ view: 'event' }),
     },
     {
       key: 'query',
       label: formatMessage(labels.query),
+      url: resolveUrl({ view: 'query' }),
     },
   ];
 
@@ -94,15 +105,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
             </Button>
           </Flexbox>
         </Link>
-        <Menu items={items} selectedKey={view}>
-          {({ key, label }) => (
-            <Item key={key} className={styles.item}>
-              <Link href={resolveUrl({ view: key })} shallow={true}>
-                {label}
-              </Link>
-            </Item>
-          )}
-        </Menu>
+        <SideNav items={items} selectedKey={view} shallow={true} />
       </GridColumn>
       <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
         <DetailsComponent

components/pages/websites/WebsiteMenuView.module.css

@@ -1,17 +1,3 @@
-.menu {
-  gap: 20px;
-}
-
-.item a {
-  color: var(--font-color100);
-  flex: 1;
-  padding: var(--size300) var(--size600);
-}
-
-.item {
-  padding: 0;
-}
-
 .data {
   min-height: 600px;
 }