feat: initialises dashboard shell

next.config.js

@@ -1,16 +1,11 @@
 import { fileURLToPath } from 'node:url';
 
 import createJiti from 'jiti';
-import bundleAnalyzerPlugin from '@next/bundle-analyzer';
 
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
 jiti('./src/env');
 
-const withBundleAnalyzer = bundleAnalyzerPlugin({
-  enabled: process.env['ANALYZE'] === 'true',
-});
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -30,4 +25,4 @@ const nextConfig = {
   },
 };
 
-export default withBundleAnalyzer(nextConfig);
+export default nextConfig;

package.json

@@ -61,6 +61,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
@@ -106,7 +107,6 @@
     "@eslint/js": "^9.5.0",
     "@happy-dom/global-registrator": "^14.12.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",

src/app/(dashboard)/app/_components/active-button.tsx

@@ -19,14 +19,14 @@ export function ActiveButton({ href, label, icon }: Props) {
     <Button
       variant="ghost"
       className={cn(
-        'w-full justify-start gap-3 font-normal text-foreground-muted hover:text-foreground',
+        'justify-start gap-3 font-normal',
         pathname === href && 'text-foreground',
       )}
       asChild
     >
       <Link href={href}>
         {icon}
-        {label}
+        <span className="w-full truncate">{label}</span>
       </Link>
     </Button>
   );

src/app/(dashboard)/app/_components/create-plus-dropdown-menu.tsx

@@ -0,0 +1,49 @@
+import { Button } from '@/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/primitives/dropdown-menu';
+import {
+  PlusIcon,
+  ChevronDownIcon,
+  PuzzleIcon,
+  PenLineIcon,
+  ListChecksIcon,
+  DiamondIcon,
+} from 'lucide-react';
+
+export function CreatePlusDropdownMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2 p-2">
+          <PlusIcon size={15} />
+          <ChevronDownIcon size={13} strokeWidth={1.5} />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-48">
+        <DropdownMenuItem>
+          <PuzzleIcon size={15} className="mr-2" />
+          <span>New Module</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <PenLineIcon size={15} className="mr-2" />
+          <span>New Notebook</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <ListChecksIcon size={15} className="mr-2" />
+          <span>New Task</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <DiamondIcon size={15} className="mr-2" />
+          <span>New Flashcard</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/(dashboard)/app/layout.tsx

@@ -1,13 +1,21 @@
 import {
+  BellIcon,
+  CircleHelpIcon,
   DiamondIcon,
+  FolderIcon,
   HomeIcon,
   ListChecksIcon,
+  MessageSquareMore,
+  PanelLeftCloseIcon,
   PenLineIcon,
   PuzzleIcon,
 } from 'lucide-react';
 import Image from 'next/image';
 import type { PropsWithChildren } from 'react';
 import { ActiveButton } from './_components/active-button';
+import { CreatePlusDropdownMenu } from './_components/create-plus-dropdown-menu';
+import { Button } from '@/primitives/button';
+import { UserButton } from '@clerk/nextjs';
 
 const iconSize = 15;
 
@@ -41,22 +49,76 @@ const sideMenuStaticLinks = [
 
 export default function AppLayout({ children }: PropsWithChildren) {
   return (
-    <main className="flex min-h-dvh gap-8 p-4">
-      <aside className="w-[220px]">
-        <div className="flex items-center gap-3 pl-3 pt-4">
-          <Image src="/logo.svg" width={35} height={35} alt="Noodle Logo" />
-          <span>Noodle</span>
+    <main className="flex min-h-dvh gap-4 p-4">
+      <aside className="flex w-[200px] flex-col justify-between">
+        <div>
+          <div className="flex items-center gap-3 pl-3 pt-4">
+            <Image src="/logo.svg" width={35} height={35} alt="Noodle Logo" />
+            <span>Noodle</span>
+          </div>
+
+          <ul className="mt-8 flex flex-col">
+            {sideMenuStaticLinks.map(({ icon, label, href }) => (
+              <li key={label} className="flex flex-1 flex-col">
+                <ActiveButton icon={icon} label={label} href={href} />
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-6 space-y-2">
+            <h3 className="pl-4 text-xs text-gray">Modules</h3>
+            <ul className="flex flex-col">
+              <li className="flex flex-1 flex-col">
+                <ActiveButton
+                  href="/modules/ai"
+                  icon={<FolderIcon size={15} strokeWidth={1.5} />}
+                  label="Artificial Intelligence"
+                />
+              </li>
+            </ul>
+          </div>
         </div>
 
-        <ul className="mt-8">
-          {sideMenuStaticLinks.map(({ icon, label, href }) => (
-            <li key={label}>
-              <ActiveButton icon={icon} label={label} href={href} />
-            </li>
-          ))}
-        </ul>
+        <div className="mb-6 flex flex-col">
+          <Button
+            variant="ghost"
+            className="justify-start gap-3 font-normal"
+            asChild
+          >
+            <a href="mailto:[email protected]">
+              <MessageSquareMore size={15} strokeWidth={1.5} /> Feedback
+            </a>
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start gap-3 font-normal"
+            asChild
+          >
+            <a href="mailto:[email protected]">
+              <CircleHelpIcon size={15} strokeWidth={1.5} /> Help & Support
+            </a>
+          </Button>
+        </div>
       </aside>
-      <div className="flex-1 rounded-lg border p-6">{children}</div>
+
+      <div className="flex flex-1 flex-col rounded-xl border px-6 pb-6 pt-4">
+        <nav className="mb-6 flex items-center justify-between">
+          <div>
+            <Button variant="ghost" size="icon" className="-ml-2">
+              <PanelLeftCloseIcon strokeWidth={1.5} size={18} />
+            </Button>
+          </div>
+          <div className="flex items-center gap-4">
+            <CreatePlusDropdownMenu />
+            <Button variant="ghost" size="icon">
+              <BellIcon size={18} />
+            </Button>
+            <UserButton />
+          </div>
+        </nav>
+
+        {children}
+      </div>
     </main>
   );
 }

src/app/(dashboard)/app/page.tsx

@@ -1,14 +1,18 @@
-import { SignOutButton } from '@clerk/nextjs';
-
-/**
- * This is the main page for the dashboard.
- * @returns A Next.js RSC page component.
- */
 export default function DashboardHome() {
   return (
-    <div>
-      <h1>Hello World</h1>
-      <SignOutButton />
+    <div className="flex flex-1">
+      <div className="flex-1">
+        <div className="space-y-3">
+          <h1 className="text-4xl font-semibold">Good afternoon, Ahmed!</h1>
+          <p className="max-w-prose text-balance text-sm leading-6 text-foreground-muted">
+            “The final wisdom of life requires not the annulment of incongruity
+            but the achievement of serenity within and above it.” - Reinhold
+            Niebuhr
+          </p>
+        </div>
+        <div>More content</div>
+      </div>
+      <div className="min-w-[280px] rounded-lg border p-4">Right side</div>
     </div>
   );
 }

src/app/(dashboard)/layout.tsx

@@ -12,7 +12,15 @@ import type { PropsWithChildren } from 'react';
 export default function DashboardLayout({ children }: PropsWithChildren) {
   return (
     <ClerkProvider
-      appearance={{ baseTheme: dark, variables: { colorPrimary: '#F9617B' } }}
+      appearance={{
+        baseTheme: dark,
+        variables: { colorPrimary: '#F9617B' },
+        elements: {
+          userButtonPopoverMain: 'bg-gray-subtle',
+          navbar: 'bg-gradient-to-r from-gray-subtle to-gray-subtle',
+          pageScrollBox: 'bg-gray-subtle',
+        },
+      }}
     >
       <TRPCReactProvider>{children}</TRPCReactProvider>
     </ClerkProvider>

src/primitives/button.tsx

@@ -17,7 +17,8 @@ const buttonVariants = cva(
         destructive: 'bg-red text-white hover:bg-red-solid-hover',
         outline:
           'border border-gray-subtle-border bg-gray-element text-foreground-muted hover:bg-gray-element-hover hover:text-foreground',
-        ghost: 'hover:bg-gray-element',
+        ghost:
+          'text-foreground-muted hover:bg-gray-element hover:text-foreground',
         link: 'relative bg-gradient-to-br from-salmon to-pink bg-clip-text text-transparent before:absolute before:bottom-0 before:h-px before:w-[calc(100%-24px)] before:rounded-full before:bg-gradient-to-br before:from-salmon before:to-pink hover:opacity-90',
       },
       size: {