feat: right sidebar base with three-column layout

.markdownlint.yaml

@@ -9,3 +9,4 @@ MD036: false  # Allow emphasis (bold/italic) without treating it as heading
 MD040: false  # Fenced code blocks don't need language specified
 MD041: false  # First line doesn't need to be h1
 MD029: false  # Allow any ordered list style (1/2/3 or continuous numbering)
+MD060: false  # Allow compact table style (no space before pipe)

app/(root)/ask-question/page.tsx

@@ -1,3 +1,3 @@
 export default function AskQuestionPage() {
-  return <h1>Ask a Question</h1>;
+  return <h1 className="text-heading-2xl">Ask a Question</h1>;
 }

app/(root)/collections/page.tsx

@@ -1,3 +1,3 @@
 export default function CollectionsPage() {
-  return <h1>Collections</h1>;
+  return <h1 className="text-heading-2xl">Collections</h1>;
 }

app/(root)/community/page.tsx

@@ -1,3 +1,3 @@
 export default function CommunityPage() {
-  return <h1>Community</h1>;
+  return <h1 className="text-heading-2xl">Community</h1>;
 }

app/(root)/jobs/page.tsx

@@ -1,3 +1,3 @@
 export default function JobsPage() {
-  return <h1>Find Jobs</h1>;
+  return <h1 className="text-heading-2xl">Find Jobs</h1>;
 }

app/(root)/layout.tsx

@@ -2,6 +2,7 @@ import { cookies } from "next/headers";
 import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
+import { RightSidebar } from "@/components/navigation/right-sidebar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
@@ -17,7 +18,14 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <div className="flex min-h-screen flex-1 flex-col">
         <MobileTopBar />
         <DesktopTopBar />
-        <main className="flex-1 pb-10 pt-10 layout-padding-x">{children}</main>
+
+        {/* Content + Right Sidebar row */}
+        <div className="flex flex-1">
+          <main className="flex-1 pb-10 pt-10 layout-padding-x">
+            {children}
+          </main>
+          <RightSidebar />
+        </div>
       </div>
     </SidebarProvider>
   );

app/(root)/page.tsx

@@ -1,6 +1,6 @@
 const HomePage = () => (
   <>
-    <h1>Hello Root page with heading H1</h1>
+    <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
 
     {/* Demo: top overflow test */}
     <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
@@ -42,7 +42,7 @@ const HomePage = () => (
             </span>
           </div>
 
-          <h2 className="mb-2 text-xl font-semibold">
+          <h2 className="text-heading-sm mb-2">
             How to implement a sticky sidebar in Next.js with Tailwind CSS?
           </h2>
 

app/(root)/profile/page.tsx

@@ -1,3 +1,3 @@
 export default function ProfilePage() {
-  return <h1>Profile</h1>;
+  return <h1 className="text-heading-2xl">Profile</h1>;
 }

app/(root)/tags/page.tsx

@@ -1,3 +1,3 @@
 export default function TagsPage() {
-  return <h1>Tags</h1>;
+  return <h1 className="text-heading-2xl">Tags</h1>;
 }

app/globals.css

@@ -1,66 +1,81 @@
-@layer theme, base, clerk, components, utilities; /* Must be at top */
+@layer theme,
+  base,
+  clerk,
+  components,
+  utilities; /* Declare layer order before imports (adds "clerk" layer) */
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@clerk/themes/shadcn.css";
 
 /* Applies dark: styles when element is .dark or inside .dark */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Registers theme tokens → generates utilities (bg-*, text-*, border-*, etc.).
+   "inline" embeds values directly, required when referencing other vars to avoid CSS scope issues. */
 @theme inline {
-  /* Register theme tokens with Tailwind so it generates utilities (bg-*, text-*, etc.) */
-  /* E.g. --color-background → bg-background, text-background, border-background, etc. */
-  /* "inline" (v4) means values are embedded here, not in a separate CSS layer */
+  /* Fonts (no mode variants) */
   --font-display: var(--font-space-grotesk), Arial, sans-serif;
   --font-sans-serif: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-jetbrains-mono), ui-monospace, Menlo, monospace;
 
+  /* Radius (derived from --radius) */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
+  /* shadcn/ui: Core */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* shadcn/ui: Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
 
-  /* NOT SHADCN VARIABLES */
+  /* shadcn/ui: Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Custom */
   --color-mobile-nav: var(--mobile-nav);
   --color-overlay: var(--overlay);
 }
 
+/* Raw CSS variables (no Tailwind utilities generated). Access via var(--background), etc. */
 :root {
-  /* Creates CSS variables available to all elements (no utility generation) */
+  /* Layout */
+  --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */
+
+  /* Base */
   --radius: 0.625rem;
 
-  --background: oklch(0.994 0 0); /* #FDFDFD */
+  /* shadcn/ui: Core */
+  --background: oklch(0.99 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --card-foreground: oklch(0.129 0.042 264.695);
@@ -78,35 +93,47 @@
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --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);
+
+  /* shadcn/ui: Sidebar */
   --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-border: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --sidebar-ring: oklch(0.704 0.04 256.788);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
   --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%
   );
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(1 0 0); /* #FFFFFF */
   --overlay: oklch(0 0 0); /* black, both modes */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-light.svg");
   --auth-bg: url("/images/auth-bg-light.webp");
 }
 
+/* Dark mode overrides — these values take precedence over :root when .dark is active */
 .dark {
-  /* Overrides CSS variables when .dark class is present */
+  /* Base */
+  --radius: 0.625rem; /* same as root */
+
+  /* shadcn/ui: Core */
   --background: oklch(0 0 0); /* #000000 */
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.1783 0.0128 270.6); /* #0F1117 */
@@ -125,23 +152,37 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --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);
+
+  /* shadcn/ui: Sidebar */
   --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-border: transparent;
   --sidebar-ring: oklch(0.551 0.027 264.364);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
+  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* same as root */
+  --gradient-primary: linear-gradient(
+    93.22deg,
+    var(--primary) -13.95%,
+    var(--primary-gradient-to) 99.54%
+  ); /* same as root */
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(0.1288 0.0406 264.7); /* #07080b */
-  --overlay: oklch(0 0 0); /* black, both modes */
+  --overlay: oklch(0 0 0); /* same as root */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-dark.svg");
   --auth-bg: url("/images/auth-bg-dark.webp");
 }
@@ -163,24 +204,6 @@
   html {
     font-family: var(--font-sans-serif);
   }
-  h1 {
-    @apply text-5xl font-bold font-display;
-  }
-  h2 {
-    @apply text-4xl font-semibold font-display;
-  }
-  h3 {
-    @apply text-3xl font-semibold font-display;
-  }
-  h4 {
-    @apply text-2xl font-medium font-display;
-  }
-  h5 {
-    @apply text-xl font-medium font-display;
-  }
-  h6 {
-    @apply text-lg font-medium font-display;
-  }
 
   :is(code, kbd, samp, pre) {
     /* Code font family */
@@ -198,6 +221,29 @@
   }
 }
 
+@layer components {
+  /* Heading utilities — apply visual heading styles independent of h1-h6 level.
+     Usage: <h2 class="text-heading-sm"> renders an h2 with small heading styling. */
+  .text-heading-2xl {
+    @apply text-5xl font-bold font-display; /* 48px */
+  }
+  .text-heading-xl {
+    @apply text-4xl font-semibold font-display; /* 36px */
+  }
+  .text-heading-lg {
+    @apply text-3xl font-semibold font-display; /* 30px */
+  }
+  .text-heading-md {
+    @apply text-2xl font-medium font-display; /* 24px */
+  }
+  .text-heading-sm {
+    @apply text-xl font-medium font-display; /* 20px */
+  }
+  .text-heading-xs {
+    @apply text-lg font-medium font-display; /* 18px */
+  }
+}
+
 @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. */
@@ -209,4 +255,12 @@
   .layout-padding-x {
     @apply px-6 md:px-8 lg:px-12;
   }
+
+  /* Subtle directional shadow for navigation edges (light mode only) */
+  .shadow-light {
+    box-shadow: -10px 10px 20px 0px oklch(0.877 0.006 17.26 / 10%);
+  }
+  .dark .shadow-light {
+    box-shadow: none;
+  }
 }

components/navigation/desktop-top-bar.tsx

@@ -1,16 +1,10 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
-    <header
-      className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex layout-padding-x",
-        TOP_BAR_HEIGHT,
-      )}
-    >
+    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x">
       <div className="flex flex-1 justify-center">
         <p className="text-muted-foreground">Global Search</p>
       </div>

components/navigation/left-sidebar.tsx

@@ -25,17 +25,19 @@ import {
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
-  TOP_BAR_HEIGHT,
 } from "@/lib/utils";
 
 export function LeftSidebar() {
   const pathname = usePathname();
 
   return (
-    <Sidebar id="left-sidebar" collapsible="icon">
-      <SidebarHeader
-        className={cn(TOP_BAR_HEIGHT, "flex-row items-center px-3")}
-      >
+    <Sidebar
+      id="left-sidebar"
+      collapsible="icon"
+      width="13rem"
+      className="shadow-light"
+    >
+      <SidebarHeader className="h-(--top-bar-height) flex-row items-center px-3">
         <Link
           href="/"
           aria-label="DevFlow sidebar logo"