Refactored layout. Added NavBar component.

components/layout/NavBar.js

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Icon, Text, Icons } from 'react-basics';
+import classNames from 'classnames';
+import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
+import NavGroup from './NavGroup';
+import styles from './NavBar.module.css';
+
+const { ChevronDown, Search } = Icons;
+
+const analytics = [
+  { key: 'dashboard', label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
+  { key: 'realtime', label: 'Realtime', url: '/realtime', icon: <Clock /> },
+  { key: 'queries', label: 'Queries', url: '/queries', icon: <Search /> },
+];
+
+const settings = [
+  { key: 'websites', label: 'Websites', url: '/settings/websites', icon: <Globe /> },
+  { key: 'users', label: 'Users', url: '/settings/users', icon: <User /> },
+  { key: 'teams', label: 'Teams', url: '/settings/teams', icon: <Users /> },
+];
+
+export default function NavBar() {
+  const [minimized, setMinimized] = useState(false);
+
+  const handleMinimize = () => setMinimized(state => !state);
+
+  return (
+    <div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
+      <div className={styles.header} onClick={handleMinimize}>
+        <Icon size="lg">
+          <Logo />
+        </Icon>
+        <Text className={styles.text}>umami</Text>
+        <Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>
+          <ChevronDown />
+        </Icon>
+      </div>
+      <NavGroup title="Analytics" items={analytics} minimized={minimized} />
+      <NavGroup title="Settings" items={settings} minimized={minimized} />
+      <div className={styles.footer}>
+        <Icon>
+          <Profile />
+        </Icon>
+        <Text>Profile</Text>
+      </div>
+    </div>
+  );
+}