feat: add mobile navigation with hamburger menu

.claude/settings.json

@@ -1,23 +1,9 @@
 {
-  "extraKnownMarketplaces": {
-    "playwright-skill": {
-      "source": {
-        "source": "github",
-        "repo": "lackeyjb/playwright-skill"
-      }
-    }
-  },
-
   "permissions": {
-    "deny": ["Read(**/.env)", "Read(**/.envrc)"],
-    "ask": [],
-
     "allow": [
       "mcp__ide__getDiagnostics",
-
       "Bash(claude mcp get:*)",
       "Bash(claude mcp list)",
-
       "mcp__playwright__browser_click",
       "mcp__playwright__browser_close",
       "mcp__playwright__browser_console_messages",
@@ -31,7 +17,6 @@
       "mcp__playwright__browser_tabs",
       "mcp__playwright__browser_take_screenshot",
       "mcp__playwright__browser_wait_for",
-
       "Bash(cat:*)",
       "Bash(echo:*)",
       "Bash(find:*)",
@@ -41,13 +26,11 @@
       "Bash(tree:*)",
       "Bash(wc:*)",
       "Bash(xargs:*)",
-
       "Bash(git log:*)",
       "Bash(gh pr checks:*)",
       "Bash(gh pr list:*)",
       "Bash(gh run list:*)",
       "Bash(gh run view:*)",
-
       "Bash(npm run build)",
       "Bash(npm run dev)",
       "Bash(npm run start)",
@@ -61,7 +44,6 @@
       "Bash(npx @biomejs/biome:*)",
       "Bash(npx lefthook:*)",
       "Bash(npx playwright:*)",
-
       "Bash(vercel --help)",
       "Bash(vercel env --help)",
       "Bash(vercel env ls:*)",
@@ -71,7 +53,6 @@
       "Bash(vercel open)",
       "Bash(vercel project ls:*)",
       "Bash(vercel whoami)",
-
       "WebFetch(domain:biomejs.dev)",
       "WebFetch(domain:docs.github.com)",
       "WebFetch(domain:github.com)",
@@ -82,6 +63,36 @@
       "WebFetch(domain:ui.shadcn.com)",
       "WebFetch(domain:vercel.com)",
       "WebFetch(domain:vitest.dev)"
-    ]
+    ],
+    "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+    "ask": []
+  },
+  "enabledPlugins": {
+    "playwright-skill@playwright-skill": false,
+    "skill-creator@my-claude-plugins": false,
+    "frontend-design@my-claude-plugins": false,
+    "tailwindcss@my-claude-plugins": false,
+    "shadcn-ui@my-claude-plugins": true,
+    "feature-dev@claude-plugins-official": true
+  },
+  "extraKnownMarketplaces": {
+    "playwright-skill": {
+      "source": {
+        "source": "github",
+        "repo": "lackeyjb/playwright-skill"
+      }
+    },
+    "my-claude-plugins": {
+      "source": {
+        "source": "github",
+        "repo": "michellepace/my-claude-plugins"
+      }
+    },
+    "claude-plugins-official": {
+      "source": {
+        "source": "github",
+        "repo": "anthropics/claude-plugins-official"
+      }
+    }
   }
 }

CLAUDE.md

@@ -1,5 +1,7 @@
 # CLAUDE.md
 
+**DevFlow** — A community-driven platform for asking and answering programming questions. Get help, share knowledge, and collaborate with developers from around the world. (Similar to Stack Overflow)
+
 The project uses British English - strictly.
 
 ## Tech Stack
@@ -29,6 +31,17 @@ vercel env ls       # Check env vars are configured
 vercel whoami       # Verify CLI is authenticated
 ```
 
+## shadcn/ui CLI
+
+```bash
+npx shadcn@latest list @shadcn            # List all available components
+npx shadcn@latest search @shadcn -q "nav" # Search components by query
+npx shadcn@latest view button card        # Preview code before installing
+npx shadcn@latest add <component>         # Add component to project
+npx shadcn@latest add button --overwrite  # Overwrite existing component
+npx shadcn@latest add @v0/<block>         # Add from v0.dev registry
+```
+
 ## Coding Practices
 
 - Only add `"use client"` when interactivity is needed

app/(auth)/layout.tsx

@@ -1,6 +1,6 @@
 const AuthLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="min-h-screen bg-cover bg-center bg-no-repeat bg-[url('/images/auth-bg-light.webp')] dark:bg-[url('/images/auth-bg-dark.webp')]">
+    <main className="flex min-h-screen items-center justify-center bg-cover bg-center bg-no-repeat bg-(image:--auth-bg) px-6 py-10 md:px-8 lg:px-12">
       {children}
     </main>
   );

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -4,9 +4,5 @@ import { ClerkSignIn } from "@/components/auth/clerk-signin";
 export default async function SignInPage() {
   await connection();
 
-  return (
-    <div className="flex min-h-screen items-center justify-center p-6">
-      <ClerkSignIn />
-    </div>
-  );
+  return <ClerkSignIn />;
 }

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -4,9 +4,5 @@ import { ClerkSignUp } from "@/components/auth/clerk-signup";
 export default async function SignUpPage() {
   await connection();
 
-  return (
-    <div className="flex min-h-screen items-center justify-center p-6">
-      <ClerkSignUp />
-    </div>
-  );
+  return <ClerkSignUp />;
 }

app/(root)/(no-right-sidebar)/community/page.tsx

@@ -0,0 +1,3 @@
+export default function CommunityPage() {
+  return <h1>Community</h1>;
+}

app/(root)/(no-right-sidebar)/jobs/page.tsx

@@ -0,0 +1,3 @@
+export default function JobsPage() {
+  return <h1>Find Jobs</h1>;
+}

app/(root)/(no-right-sidebar)/layout.tsx

@@ -0,0 +1,7 @@
+// Full-width layout without right sidebar
+// Layout: [LeftSidebar (sticky)] [Main Content]
+const NoRightSidebarLayout = ({ children }: { children: React.ReactNode }) => {
+  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
+};
+
+export default NoRightSidebarLayout;

app/(root)/(no-right-sidebar)/profile/page.tsx

@@ -0,0 +1,3 @@
+export default function ProfilePage() {
+  return <h1>Profile</h1>;
+}

app/(root)/(no-right-sidebar)/tags/page.tsx

@@ -0,0 +1,3 @@
+export default function TagsPage() {
+  return <h1>Tags</h1>;
+}

app/(root)/(with-right-sidebar)/ask-question/page.tsx

@@ -0,0 +1,3 @@
+export default function AskQuestionPage() {
+  return <h1>Ask a Question</h1>;
+}

app/(root)/(with-right-sidebar)/collections/page.tsx

@@ -0,0 +1,3 @@
+export default function CollectionsPage() {
+  return <h1>Collections</h1>;
+}

app/(root)/(with-right-sidebar)/layout.tsx

@@ -0,0 +1,11 @@
+// TODO: Add <RightSidebar> for tag widgets, hot questions, etc.
+// Layout: [LeftSidebar (sticky)] [Main Content] [RightSidebar]
+const WithRightSidebarLayout = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
+};
+
+export default WithRightSidebarLayout;

app/(root)/(with-right-sidebar)/page.tsx

@@ -0,0 +1,31 @@
+const Home = () => (
+  <>
+    <h1>Hello Root page with heading H1</h1>
+
+    {/* Header boundary marker */}
+    <div className="mt-8 bg-primary/30 p-4">HEADER: {"words ".repeat(50)}</div>
+
+    {/* Flexbox demo: grow vs flex-none */}
+    <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
+      {/* Fixed width - won't grow */}
+      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
+        flex-none
+      </div>
+
+      {/* Grows to fill available space */}
+      <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
+        grow
+      </div>
+
+      {/* Fixed width - won't grow */}
+      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
+        flex-none
+      </div>
+    </div>
+
+    {/* Footer boundary marker */}
+    <div className="bg-primary/30 p-4">FOOTER: {"words ".repeat(50)}</div>
+  </>
+);
+
+export default Home;

app/globals.css

@@ -29,6 +29,7 @@
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);
+  --color-mobile-nav: var(--mobile-nav);
   --color-chart-5: var(--chart-5);
   --color-chart-4: var(--chart-4);
   --color-chart-3: var(--chart-3);
@@ -54,7 +55,14 @@
 
 :root {
   /* Creates CSS variables available to all elements (no utility generation) */
+  /* Only defined in root, not .dark */
   --radius: 0.625rem;
+  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
+  --gradient-primary: linear-gradient(
+    93.22deg,
+    var(--primary) -13.95%,
+    var(--primary-gradient-to) 99.54%
+  );
 
   --background: oklch(0.994 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
@@ -64,7 +72,7 @@
   --popover-foreground: oklch(0.129 0.042 264.695);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.968 0.007 247.896);
+  --secondary: oklch(0.9147 0.0205 264.47); /* #DCE3F1 - Figma */
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
@@ -79,23 +87,19 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(1 0 0); /* #FFFFFF */
+  --sidebar: oklch(1 0 0); /* Figma #ffffff */
   --sidebar-foreground: oklch(0.2102 0.0185 270.39); /* #151821 */
   --sidebar-primary: oklch(0.208 0.042 265.755);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
   --sidebar-accent: oklch(0.968 0.007 247.896);
   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
   --sidebar-border: oklch(0.929 0.013 255.508);
   --sidebar-ring: oklch(0.704 0.04 256.788);
-  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
-  --gradient-primary: linear-gradient(
-    93.22deg,
-    var(--primary) -13.95%,
-    var(--primary-gradient-to) 99.54%
-  );
+  --mobile-nav: oklch(1 0 0); /* #FFFFFF */
 
   /* Centralised logo theming */
   --logo-full-themed: url("/images/logo-light.svg");
+  --auth-bg: url("/images/auth-bg-light.webp");
 }
 
 .dark {
@@ -108,7 +112,7 @@
   --popover-foreground: oklch(0.984 0.003 247.858);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.279 0.041 260.031);
+  --secondary: oklch(0.2728 0.0257 265.4); /* #212734 - Figma */
   --secondary-foreground: oklch(0.984 0.003 247.858);
   --muted: oklch(0.279 0.041 260.031);
   --muted-foreground: oklch(0.704 0.04 256.788);
@@ -123,17 +127,19 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.178 0.013 270.6); /* #0F1117 */
+  --sidebar: oklch(0.1783 0.0128 270.6); /* Figma #0F1117 */
   --sidebar-foreground: oklch(1 0 0); /* #FFFFFF */
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
   --sidebar-accent: oklch(0.279 0.041 260.031);
   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.551 0.027 264.364);
+  --mobile-nav: oklch(0.1288 0.0406 264.7); /* #07080b */
 
   /* Centralised logo theming (dark) */
   --logo-full-themed: url("/images/logo-dark.svg");
+  --auth-bg: url("/images/auth-bg-dark.webp");
 }
 
 @layer base {
@@ -187,3 +193,11 @@
     @apply overflow-x-auto rounded-lg bg-muted p-4 text-sm;
   }
 }
+
+@layer utilities {
+  /* Custom SVG icons use hardcoded white fill. Since <Image> loads them as external
+     files, CSS currentColor won't work. Invert to black in light mode instead. */
+  .invert-colors {
+    @apply invert dark:invert-0;
+  }
+}