feat(nav): mount the sidebar from the root layout for every page

Move the sidebar out of /dashboard and into a server component the
root layout renders whenever there's a session. Nav links derive
the active state from usePathname so the same component works on
problem sets, practice, FTW, settings — anywhere a logged-in user
lands. The page body gets pushed in via a body class so the public
landing page stays unaffected.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

app/dashboard/page.tsx

@@ -4,34 +4,22 @@ import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
 import {
   ArrowRight,
-  BarChart3,
   CheckCircle2,
   ClipboardList,
   FileJson,
-  Gauge,
-  ListChecks,
   MessageSquareWarning,
-  PenLine,
   PlayCircle,
-  Settings,
   Sparkles,
-  Swords,
-  Target,
-  Trophy,
-  User,
-  Users,
 } from "lucide-react";
 import { prisma } from "@/lib/db";
 import { authOptions } from "@/lib/auth";
 import { AuthButton } from "@/app/auth-button";
 import { ThemeToggle } from "@/app/theme-toggle";
 import { TypewriterGreeting } from "@/app/typewriter-greeting";
-import { MobileNavScrim, MobileNavToggle } from "./mobile-nav-toggle";
 import { isVisibleToStudent } from "@/lib/visibility";
 import { profilePathFromEmail } from "@/lib/user-profile";
 import { computeBestAverageScore } from "@/lib/analytics";
 import { normalizeTagList } from "@/lib/problem-tags";
-import { hasPermission } from "@/lib/permissions";
 import { compareProblemSetRecords } from "@/lib/problem-set-order";
 
 export const dynamic = "force-dynamic";
@@ -108,11 +96,6 @@ export default async function DashboardPage() {
   const visibleSets = (
     currentUser.role === "ADMIN" ? allSets : allSets.filter((set) => isVisibleToStudent(set))
   ).sort(compareProblemSetRecords);
-  const canManageContent = hasPermission(currentUser.role, "admin:content");
-  const canViewStudents = hasPermission(currentUser.role, "admin:users");
-  const canViewAnalytics = hasPermission(currentUser.role, "admin:analytics");
-  const canManageFeedback = hasPermission(currentUser.role, "admin:feedback");
-  const canViewAudit = hasPermission(currentUser.role, "admin:audit");
 
   const attemptsBySet = new Map<
     string,
@@ -266,90 +249,6 @@ export default async function DashboardPage() {
 
   return (
     <main className="app-shell">
-      <MobileNavScrim />
-      <aside className="sidebar" aria-label="Primary" tabIndex={0}>
-        <nav className="nav-list">
-          <Link className="nav-item active" href="/dashboard">
-            <Gauge size={18} />
-            <span className="nav-label">Dashboard</span>
-          </Link>
-          <Link className="nav-item" href="/problem-sets">
-            <ClipboardList size={18} />
-            <span className="nav-label">Problem Sets</span>
-          </Link>
-          <Link className="nav-item" href="/practice">
-            <Target size={18} />
-            <span className="nav-label">Practice</span>
-          </Link>
-          <Link className="nav-item" href="/ftw">
-            <Swords size={18} />
-            <span className="nav-label">FTW</span>
-          </Link>
-          {hasPermission(currentUser.role, "admin:view") ? (
-            <>
-              {canManageContent ? (
-                <>
-                  <Link className="nav-item" href="/admin/sets">
-                    <ListChecks size={18} />
-                    <span className="nav-label">Manage Sets</span>
-                  </Link>
-                  <Link className="nav-item" href="/admin/create">
-                    <PenLine size={18} />
-                    <span className="nav-label">Create Set</span>
-                  </Link>
-                  <Link className="nav-item" href="/admin/import">
-                    <FileJson size={18} />
-                    <span className="nav-label">JSON Import</span>
-                  </Link>
-                </>
-              ) : null}
-              {canViewStudents ? (
-                <Link className="nav-item" href="/admin/students">
-                  <Users size={18} />
-                  <span className="nav-label">Students</span>
-                </Link>
-              ) : null}
-              {canViewAnalytics ? (
-                <Link className="nav-item" href="/admin/analytics">
-                  <BarChart3 size={18} />
-                  <span className="nav-label">Analytics</span>
-                </Link>
-              ) : null}
-              {canManageFeedback ? (
-                <Link className="nav-item" href="/admin/feedback">
-                  <MessageSquareWarning size={18} />
-                  <span className="nav-label">Feedback</span>
-                </Link>
-              ) : null}
-              {canViewAudit ? (
-                <Link className="nav-item" href="/admin/audit">
-                  <CheckCircle2 size={18} />
-                  <span className="nav-label">Audit</span>
-                </Link>
-              ) : null}
-            </>
-          ) : null}
-          <Link className="nav-item" href="/users">
-            <Users size={18} />
-            <span className="nav-label">Users</span>
-          </Link>
-          <Link className="nav-item" href={profileHref}>
-            <User size={18} />
-            <span className="nav-label">My Profile</span>
-          </Link>
-          <Link className="nav-item" href="/leaderboard">
-            <Trophy size={18} />
-            <span className="nav-label">Leaderboard</span>
-          </Link>
-          <Link className="nav-item" href="/settings">
-            <Settings size={18} />
-            <span className="nav-label">Settings</span>
-          </Link>
-        </nav>
-
-        <div className="sidebar-footer" />
-      </aside>
-
       <section className="workspace">
         <header className="topbar">
           <div>
@@ -359,7 +258,6 @@ export default async function DashboardPage() {
             <h1>training dashboard</h1>
           </div>
           <div className="topbar-actions">
-            <MobileNavToggle />
             <ThemeToggle />
             <AuthButton
               avatarUrl={currentUser.avatarUrl}

app/dashboard/mobile-nav-toggle.tsx app/global-mobile-nav.tsxapp/dashboard/mobile-nav-toggle.tsx renamed to app/global-mobile-nav.tsx

@@ -5,7 +5,7 @@ import { Menu, X } from "lucide-react";
 
 const OPEN_CLASS = "mobile-nav-open";
 
-export function MobileNavToggle() {
+export function GlobalMobileNavToggle() {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -34,7 +34,7 @@ export function MobileNavToggle() {
   return (
     <button
       type="button"
-      className="mobile-nav-toggle"
+      className="mobile-nav-toggle global-mobile-nav-toggle"
       aria-label={open ? "Close navigation" : "Open navigation"}
       aria-expanded={open}
       onClick={() => setOpen((prev) => !prev)}
@@ -44,7 +44,7 @@ export function MobileNavToggle() {
   );
 }
 
-export function MobileNavScrim() {
+export function GlobalMobileNavScrim() {
   return (
     <button
       type="button"

app/globals.css

@@ -142,11 +142,19 @@ table {
 
 .app-shell {
   position: relative;
-  display: grid;
-  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
+  display: block;
+  min-height: 100vh;
+}
+
+.site-content {
   min-height: 100vh;
 }
 
+body.has-site-sidebar .site-content {
+  padding-left: var(--sidebar-collapsed-width);
+  transition: padding-left 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
 .single-page {
   position: relative;
   min-height: 100vh;
@@ -2039,6 +2047,16 @@ html:not(.light) .problem-jump-button {
   color: var(--color-pink);
 }
 
+.global-mobile-nav-toggle {
+  position: fixed;
+  top: 14px;
+  left: 14px;
+  z-index: 41;
+  width: 42px;
+  height: 42px;
+  box-shadow: 0 6px 18px rgba(8, 10, 18, 0.18);
+}
+
 .mobile-nav-scrim {
   display: none;
   position: fixed;
@@ -2055,7 +2073,12 @@ html:not(.light) .problem-jump-button {
     grid-template-columns: 1fr;
   }
 
-  .mobile-nav-toggle {
+  body.has-site-sidebar .site-content {
+    padding-left: 0;
+  }
+
+  .mobile-nav-toggle,
+  .global-mobile-nav-toggle {
     display: inline-flex;
   }
 
@@ -2433,8 +2456,7 @@ html {
 }
 
 .workspace {
-  margin-left: var(--sidebar-collapsed-width);
-  width: calc(100% - var(--sidebar-collapsed-width));
+  width: 100%;
   min-height: 100vh;
   max-width: none;
   padding: 32px;
@@ -2474,6 +2496,39 @@ html {
   overflow-y: auto;
 }
 
+.sidebar-brand {
+  display: grid;
+  place-items: center;
+  margin: 0 auto 8px;
+  padding: 4px;
+  border-radius: 14px;
+  text-decoration: none;
+}
+
+.sidebar-brand-mark {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  overflow: hidden;
+  transition:
+    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.sidebar-brand-mark img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sidebar:hover .sidebar-brand-mark,
+.sidebar:focus-within .sidebar-brand-mark {
+  width: 56px;
+  height: 56px;
+}
+
 .sidebar-footer {
   margin-top: auto;
 }

app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "katex/dist/katex.min.css";
 import "./globals.css";
+import { SiteSidebar } from "./site-sidebar";
+import { GlobalMobileNavToggle } from "./global-mobile-nav";
 
 export const metadata: Metadata = {
   title: "DBSMO Training Platform",
@@ -13,11 +15,13 @@ export const metadata: Metadata = {
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const sidebar = await SiteSidebar();
+
   return (
     <html lang="en" className={inter.variable} suppressHydrationWarning>
       <head>
@@ -32,7 +36,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className={inter.className}>
+      <body className={`${inter.className}${sidebar ? " has-site-sidebar" : ""}`}>
         <div className="confetti-triangles" aria-hidden="true">
           <span className="tri-1" />
           <span className="tri-2" />
@@ -47,7 +51,9 @@ export default function RootLayout({
           <span className="tri-11" />
           <span className="tri-12" />
         </div>
-        {children}
+        {sidebar}
+        {sidebar ? <GlobalMobileNavToggle /> : null}
+        <div className="site-content">{children}</div>
       </body>
     </html>
   );

app/site-sidebar-nav.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  BarChart3,
+  CheckCircle2,
+  ClipboardList,
+  FileJson,
+  Gauge,
+  ListChecks,
+  MessageSquareWarning,
+  PenLine,
+  Settings,
+  Swords,
+  Target,
+  Trophy,
+  User,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+
+type SidebarLink = {
+  href: string;
+  label: string;
+  icon: keyof typeof ICON_MAP;
+  match?: string;
+};
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Gauge,
+  ClipboardList,
+  Target,
+  Swords,
+  ListChecks,
+  PenLine,
+  FileJson,
+  Users,
+  BarChart3,
+  MessageSquareWarning,
+  CheckCircle2,
+  User,
+  Trophy,
+  Settings,
+};
+
+export function SiteSidebarNav({ links }: { links: SidebarLink[] }) {
+  const pathname = usePathname() ?? "/";
+
+  return (
+    <nav className="nav-list">
+      {links.map((link) => {
+        const Icon = ICON_MAP[link.icon];
+        const matchPrefix = link.match ?? link.href;
+        const isActive =
+          pathname === link.href ||
+          (matchPrefix !== "/" && pathname.startsWith(matchPrefix));
+        return (
+          <Link
+            key={link.href}
+            className={`nav-item${isActive ? " active" : ""}`}
+            href={link.href}
+          >
+            <Icon size={18} />
+            <span className="nav-label">{link.label}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+export type { SidebarLink };