New website nav menu.

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>