refactor(web): NavigationBar (sidebar) styles

web/src/components/AppBar.jsx

@@ -7,7 +7,7 @@ import MoreIcon from '../icons/More';
 import AutoAwesomeIcon from '../icons/AutoAwesome';
 import LightModeIcon from '../icons/LightMode';
 import DarkModeIcon from '../icons/DarkMode';
-import { useDarkMode, useSidebar } from '../context';
+import { useDarkMode, useDrawer } from '../context';
 import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
@@ -18,10 +18,10 @@ let lastScrollY = window.scrollY;
 export default function AppBar({ title }) {
   const [show, setShow] = useState(true);
   const [atZero, setAtZero] = useState(window.scrollY === 0);
-  const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [_, setDrawerVisible] = useState(true);
   const [showMoreMenu, setShowMoreMenu] = useState(false);
   const { currentMode, persistedMode, setDarkMode } = useDarkMode();
-  const { showSidebar, setShowSidebar } = useSidebar();
+  const { showDrawer, setShowDrawer } = useDrawer();
 
   const handleSelectDarkMode = useCallback(
     (value, label) => {
@@ -65,9 +65,9 @@ export default function AppBar({ title }) {
     setShowMoreMenu(false);
   }, [setShowMoreMenu]);
 
-  const handleShowSidebar = useCallback(() => {
-    setShowSidebar(true);
-  }, [setShowSidebar]);
+  const handleShowDrawer = useCallback(() => {
+    setShowDrawer(true);
+  }, [setShowDrawer]);
 
   return (
     <div
@@ -76,7 +76,7 @@ export default function AppBar({ title }) {
       } ${!atZero ? 'shadow' : ''}`}
     >
       <div className="lg:hidden">
-        <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
+        <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">
           <MenuIcon />
         </Button>
       </div>

web/src/components/Link.jsx

@@ -1,9 +1,16 @@
 import { h } from 'preact';
+import { Link as RouterLink } from 'preact-router/match';
 
-export default function Link({ className, children, href, ...props }) {
+export default function Link({
+  activeClassName = '',
+  className = 'text-blue-500 hover:underline',
+  children,
+  href,
+  ...props
+}) {
   return (
-    <a className={`text-blue-500 dark:text-blue-400 hover:underline ${className}`} href={href} {...props}>
+    <RouterLink activeClassName={activeClassName} className={className} href={href} {...props}>
       {children}
-    </a>
+    </RouterLink>
   );
 }

web/src/components/Menu.jsx

@@ -6,7 +6,7 @@ export default function Menu({ className, children, onDismiss, relativeTo }) {
   return relativeTo ? (
     <RelativeModal
       children={children}
-      className={`${className || ''} pt-2 pb-2`}
+      className={`${className || ''} py-2`}
       role="listbox"
       onDismiss={onDismiss}
       portalRootID="menus"
@@ -48,5 +48,5 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
 }
 
 export function MenuSeparator() {
-  return <div className="border-b border-gray-200 my-2" />;
+  return <div className="border-b border-gray-200 dark:border-gray-800 my-2" />;
 }

web/src/components/NavigationDrawer.jsx

@@ -0,0 +1,61 @@
+import { h, Fragment } from 'preact';
+import { Link } from 'preact-router/match';
+import { useCallback, useState } from 'preact/hooks';
+import { useDrawer } from '../context';
+
+export default function NavigationDrawer({ children, header }) {
+  const { showDrawer, setShowDrawer } = useDrawer();
+
+  const handleDismiss = useCallback(() => {
+    setShowDrawer(false);
+  }, [setShowDrawer]);
+
+  return (
+    <Fragment>
+      {showDrawer ? <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 ${
+          !showDrawer ? '-translate-x-full' : ''
+        } lg:translate-x-0 transition-transform duration-300`}
+        onClick={handleDismiss}
+      >
+        {header ? (
+          <div className="flex-shrink-0 p-5 flex flex-row items-center justify-between border-b border-gray-200 dark:border-gray-700">
+            {header}
+          </div>
+        ) : null}
+
+        <nav className="flex flex-col flex-grow overflow-hidden overflow-y-auto p-2 space-y-2">{children}</nav>
+      </div>
+    </Fragment>
+  );
+}
+
+export function Destination({ className = '', href, text, ...other }) {
+  const external = href.startsWith('http');
+  const props = external ? { rel: 'noopener nofollow', target: '_blank' } : {};
+
+  const { setShowDrawer } = useDrawer();
+
+  const handleDismiss = useCallback(() => {
+    setTimeout(() => {
+      setShowDrawer(false);
+    }, 250);
+  }, [setShowDrawer]);
+
+  const styleProps = {
+    [external
+      ? 'className'
+      : 'class']: 'block p-2 text-sm font-semibold text-gray-900 rounded hover:bg-blue-500 dark:text-gray-200 hover:text-white dark:hover:text-white focus:outline-none ring-opacity-50 focus:ring-2 ring-blue-300',
+  };
+
+  return (
+    <Link activeClassName="bg-blue-500 bg-opacity-50 text-white" {...styleProps} href={href} {...props} {...other}>
+      <div onClick={handleDismiss}>{text}</div>
+    </Link>
+  );
+}
+
+export function Separator() {
+  return <div className="border-b border-gray-200 dark:border-gray-700 -mx-2" />;
+}

web/src/components/RelativeModal.jsx

@@ -1,5 +1,6 @@
 import { h, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
+import { DarkModeProvider } from '../context';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 
 const WINDOW_PADDING = 20;
@@ -75,7 +76,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
   }, [show, position.width, ref.current]);
 
   const menu = (
-    <Fragment>
+    <DarkModeProvider>
       <div className="absolute inset-0" onClick={handleDismiss} />
       <div
         className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
@@ -90,7 +91,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       >
         {children}
       </div>
-    </Fragment>
+    </DarkModeProvider>
   );
 
   return portalRoot ? createPortal(menu, portalRoot) : menu;