Implement navigation changes

packages/web/package.json

@@ -23,6 +23,7 @@
     "@lezer/javascript": "^1.4.17",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.0.7",

packages/web/src/Layout.tsx

@@ -1,7 +1,5 @@
-import { NavLink, useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 import { Toaster } from '@/components/ui/sonner';
-import { SrcbookLogo } from './components/logos';
-import useTheme from './components/use-theme';
 import { SettingsProvider } from '@/components/use-settings';
 import { type SettingsType } from '@/types';
 import { getConfig } from '@/lib/server';
@@ -14,65 +12,11 @@ export async function loader() {
 
 export default function Layout(props: { children: React.ReactNode }) {
   const { config } = useLoaderData() as { config: SettingsType };
-  const { theme, toggleTheme } = useTheme();
 
   return (
     <>
-      <div className="flex flex-col">
-        <header className="h-8 min-h-8 max-h-8 w-full flex items-center justify-between fixed bg-background z-10 border-b border-border text-sm">
-          <nav className="px-6 flex-1">
-            <ul className="flex items-center space-x-6">
-              <li>
-                <NavLink to="/">
-                  <h1 className="font-mono font-bold flex items-center space-x-[10px]">
-                    <SrcbookLogo size={20} />
-                    <span>Srcbook</span>
-                  </h1>
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  to="/"
-                  className="font-semibold text-tertiary-foreground visited:text-tertiary-foreground hover:text-foreground transition-colors"
-                >
-                  Home
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  to="/secrets"
-                  className="font-semibold text-tertiary-foreground visited:text-tertiary-foreground hover:text-foreground transition-colors"
-                >
-                  Secrets
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  to="/settings"
-                  className="font-semibold text-tertiary-foreground visited:text-tertiary-foreground hover:text-foreground transition-colors"
-                >
-                  Settings
-                </NavLink>
-              </li>
-            </ul>
-          </nav>
-          {process.env.NODE_ENV !== 'production' && (
-            <div className="pr-3">
-              <button
-                onClick={toggleTheme}
-                className="border-none outline-none text-muted-foreground hover:text-foreground font-semibold transition-colors"
-              >
-                {theme === 'light' ? '(DEV) Dark mode' : '(DEV) Light mode'}
-              </button>
-            </div>
-          )}
-        </header>
-        <SettingsProvider config={config}>
-          <div className="w-full max-w-[936px] mx-auto px-4 lg:px-0 py-12 mt-8">
-            {props.children}
-          </div>
-        </SettingsProvider>
-      </div>
+      <SettingsProvider config={config}>{props.children}</SettingsProvider>
+
       <Toaster position="top-right" offset="20px" closeButton />
     </>
   );

packages/web/src/LayoutNavbar.tsx

@@ -0,0 +1,31 @@
+import { useLoaderData } from 'react-router-dom';
+import { Toaster } from '@/components/ui/sonner';
+import { SettingsProvider } from '@/components/use-settings';
+import { type SettingsType } from '@/types';
+import { getConfig } from '@/lib/server';
+import { Navbar } from './components/navbar';
+
+export async function loader() {
+  const { result: config } = await getConfig();
+
+  return { config };
+}
+
+export default function LayoutNavbar(props: { children: React.ReactNode }) {
+  const { config } = useLoaderData() as { config: SettingsType };
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <Navbar />
+
+        <SettingsProvider config={config}>
+          <div className="w-full max-w-[936px] mx-auto px-4 lg:px-0 py-12 mt-8">
+            {props.children}
+          </div>
+        </SettingsProvider>
+      </div>
+      <Toaster position="top-right" offset="20px" closeButton />
+    </>
+  );
+}

packages/web/src/components/collapsible-container.tsx

@@ -0,0 +1,31 @@
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+export default function CollapsibleContainer(props: {
+  open: boolean;
+  onChangeOpen: (value: boolean) => void;
+  title: string;
+  className?: string | null;
+  children: React.ReactNode;
+}) {
+  const { open, onChangeOpen, title, children } = props;
+
+  return (
+    <Collapsible open={open} onOpenChange={onChangeOpen}>
+      <div className={cn('w-full border rounded-sm', props.className)}>
+        <CollapsibleTrigger className="block w-full">
+          <div className="p-3 flex items-center justify-between">
+            <h5 className="font-bold leading-none">{title}</h5>
+            <ChevronRight
+              className={cn('w-4 h-4 transition-transform text-tertiary-foreground', {
+                'transform rotate-90': open,
+              })}
+            />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>{children}</CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}