feat: sidebar

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

@@ -1,11 +1,12 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import { SidebarMobile } from "@/components/navigation/sidebar/sidebar-mobile";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { Empty } from "@unkey/ui";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { UsageBanner } from "./banner";
-import { DesktopSidebar } from "./desktop-sidebar";
-import { MobileSideBar } from "./mobile-sidebar";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -22,48 +23,53 @@ export default async function Layout({ children }: LayoutProps) {
       },
     },
   });
+
   if (!workspace) {
     return redirect("/apis");
   }
 
   return (
-    <div className="h-[100dvh] relative flex flex-col overflow-hidden bg-background lg:flex-row">
+    <div className="h-[100dvh] relative flex flex-col overflow-hidden bg-base-12 lg:flex-row">
       <UsageBanner workspace={workspace} />
+      <SidebarProvider>
+        <div className="flex flex-1 overflow-hidden">
+          {/* Desktop Sidebar */}
+          <AppSidebar workspace={workspace} className="bg-gray-1 border-grayA-4" />
 
-      <MobileSideBar className="lg:hidden" workspace={workspace} />
-      <div className="flex flex-1 overflow-hidden bg-gray-100 dark:bg-gray-950">
-        <DesktopSidebar
-          workspace={workspace}
-          className="isolate hidden lg:flex min-w-[250px] max-w-[250px] bg-[inherit]"
-        />
+          {/* Main content area */}
+          <div className="flex-1 overflow-auto">
+            <div
+              className="isolate bg-base-12 w-full overflow-x-auto flex flex-col items-center"
+              id="layout-wrapper"
+            >
+              {/* Mobile sidebar at the top of content */}
+              <SidebarMobile workspace={workspace} />
 
-        <div
-          className="isolate bg-background lg:border-l border-t lg:rounded-tl-[0.625rem] border-border w-full overflow-x-auto flex flex-col items-center lg:mt-2"
-          id="layout-wrapper"
-        >
-          <div className="w-full">
-            {workspace.enabled ? (
-              children
-            ) : (
-              <div className="flex items-center justify-center w-full h-full">
-                <Empty>
-                  <Empty.Icon />
-                  <Empty.Title>This workspace is disabled</Empty.Title>
-                  <Empty.Description>
-                    Contact{" "}
-                    <Link
-                      href={`mailto:support@unkey.dev?body=workspaceId: ${workspace.id}`}
-                      className="underline"
-                    >
-                      support@unkey.dev
-                    </Link>
-                  </Empty.Description>
-                </Empty>
+              <div className="w-full">
+                {workspace.enabled ? (
+                  children
+                ) : (
+                  <div className="flex items-center justify-center w-full h-full">
+                    <Empty>
+                      <Empty.Icon />
+                      <Empty.Title>This workspace is disabled</Empty.Title>
+                      <Empty.Description>
+                        Contact{" "}
+                        <Link
+                          href={`mailto:support@unkey.dev?body=workspaceId: ${workspace.id}`}
+                          className="underline"
+                        >
+                          support@unkey.dev
+                        </Link>
+                      </Empty.Description>
+                    </Empty>
+                  </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
         </div>
-      </div>
+      </SidebarProvider>
     </div>
   );
 }

apps/dashboard/components.json

@@ -2,14 +2,19 @@
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
   "rsc": true,
+  "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "@/styles/tailwind/tailwind.css",
     "baseColor": "zinc",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
   }
 }