refactor(web): NavigationBar (sidebar) styles

web/src/Sidebar.jsx

@@ -1,56 +1,45 @@
 import { h, Fragment } from 'preact';
-import Link from './components/Link';
 import LinkedLogo from './components/LinkedLogo';
-import { Link as RouterLink } from 'preact-router/match';
-import { useCallback, useState } from 'preact/hooks';
-import { useSidebar } from './context';
-
-function NavLink({ className = '', href, text, ...other }) {
-  const external = href.startsWith('http');
-  const El = external ? Link : RouterLink;
-  const props = external ? { rel: 'noopener nofollow', target: '_blank' } : {};
-  return (
-    <El
-      activeClassName="bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200"
-      className={`block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline self-end ${className}`}
-      href={href}
-      {...other}
-      {...props}
-    >
-      {text}
-    </El>
-  );
-}
+import { Match } from 'preact-router/match';
+import { memo } from 'preact/compat';
+import { useConfig } from './api';
+import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
+import { useCallback, useMemo } from 'preact/hooks';
 
 export default function Sidebar() {
-  const { showSidebar, setShowSidebar } = useSidebar();
-
-  const handleDismiss = useCallback(() => {
-    setShowSidebar(false);
-  }, [setShowSidebar]);
+  const { data: config } = useConfig();
+  const cameras = useMemo(() => Object.keys(config.cameras), [config]);
 
   return (
-    <Fragment>
-      {showSidebar ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
-      <div
-        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
-          !showSidebar ? '-translate-x-full' : ''
-        } lg:translate-x-0 transition-transform duration-300`}
-      >
-        <div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
-          <div class="text-gray-500">
-            <LinkedLogo />
-          </div>
-        </div>
-        <nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
-          <NavLink onClick={handleDismiss} href="/" text="Cameras" />
-          <NavLink onClick={handleDismiss} href="/events" text="Events" />
-          <NavLink onClick={handleDismiss} href="/debug" text="Debug" />
-          <hr className="border-solid border-gray-500 mt-2" />
-          <NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
-          <NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
-        </nav>
-      </div>
-    </Fragment>
+    <NavigationDrawer header={<Header />}>
+      <Destination href="/" text="Cameras" />
+      <Match path="/cameras/:camera">
+        {({ matches }) =>
+          matches ? (
+            <Fragment>
+              <Separator />
+              {cameras.map((camera) => (
+                <Destination href={`/cameras/${camera}`} text={camera} />
+              ))}
+              <Separator />
+            </Fragment>
+          ) : null
+        }
+      </Match>
+      <Destination href="/events" text="Events" />
+      <Destination href="/debug" text="Debug" />
+      <Separator />
+      <div className="flex flex-grow" />
+      <Destination className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
+      <Destination className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
+    </NavigationDrawer>
   );
 }
+
+const Header = memo(function Header() {
+  return (
+    <div class="text-gray-500">
+      <LinkedLogo />
+    </div>
+  );
+});