refactor(web): NavigationBar (sidebar) styles

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" />;
+}