feat: sidebar first iteration

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

@@ -1,11 +1,11 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import { SidebarInset, 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,47 +22,49 @@ 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} />
-
-      <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]"
-        />
-
-        <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="flex flex-1 overflow-hidden">
+        <SidebarProvider>
+          <AppSidebar
+            workspace={workspace}
+            className="bg-gray-1 border-grayA-4"
+          />
+          <SidebarInset>
+            <div
+              className="isolate bg-base-12 w-full overflow-x-auto flex flex-col items-center"
+              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>
+                )}
               </div>
-            )}
-          </div>
-        </div>
+            </div>
+          </SidebarInset>
+        </SidebarProvider>
       </div>
     </div>
   );

apps/dashboard/app/(app)/workspace-navigations.tsx

@@ -1,23 +1,22 @@
 import type { Workspace } from "@/lib/db";
+import { cn } from "../../lib/utils";
 import {
-  BookOpen,
-  Cable,
-  Crown,
   Fingerprint,
   Gauge,
-  List,
-  type LucideIcon,
-  MonitorDot,
-  Settings2,
-  ShieldCheck,
-  TableProperties,
-} from "lucide-react";
-import { cn } from "../../lib/utils";
+  Gear,
+  BookBookmark,
+  InputSearch,
+  Layers3,
+  Nodes,
+  ShieldKey,
+  Sparkle3,
+  Grid,
+} from "@unkey/icons";
 
-type NavItem = {
+export type NavItem = {
   disabled?: boolean;
   tooltip?: string;
-  icon: LucideIcon | React.ElementType;
+  icon: React.ElementType;
   href: string;
   external?: boolean;
   label: string;
@@ -43,11 +42,14 @@ const DiscordIcon = () => (
   </svg>
 );
 
-const Tag: React.FC<{ label: string; className?: string }> = ({ label, className }) => (
+const Tag: React.FC<{ label: string; className?: string }> = ({
+  label,
+  className,
+}) => (
   <div
     className={cn(
       "border text-gray-11 border-gray-6 hover:border-gray-8 rounded text-xs px-1 py-0.5 font-mono",
-      className,
+      className
     )}
   >
     {label}
@@ -56,11 +58,11 @@ const Tag: React.FC<{ label: string; className?: string }> = ({ label, className
 
 export const createWorkspaceNavigation = (
   workspace: Pick<Workspace, "features" | "betaFeatures">,
-  segments: string[],
+  segments: string[]
 ) => {
   return [
     {
-      icon: Cable,
+      icon: Nodes,
       href: "/apis",
       label: "APIs",
       active: segments.at(0) === "apis",
@@ -72,34 +74,34 @@ export const createWorkspaceNavigation = (
       active: segments.at(0) === "ratelimits",
     },
     {
-      icon: ShieldCheck,
+      icon: ShieldKey,
       label: "Authorization",
       href: "/authorization/roles",
       active: segments.some((s) => s === "authorization"),
     },
 
     {
-      icon: List,
+      icon: InputSearch,
       href: "/audit",
       label: "Audit Log",
       active: segments.at(0) === "audit",
     },
     {
-      icon: MonitorDot,
+      icon: Grid,
       href: "/monitors/verifications",
       label: "Monitors",
       active: segments.at(0) === "verifications",
       hidden: !workspace.features.webhooks,
     },
     {
-      icon: TableProperties,
+      icon: Layers3,
       href: "/logs",
       label: "Logs",
       active: segments.at(0) === "logs",
       tag: <Tag label="Beta" />,
     },
     {
-      icon: Crown,
+      icon: Sparkle3,
       href: "/success",
       label: "Success",
       active: segments.at(0) === "success",
@@ -114,7 +116,7 @@ export const createWorkspaceNavigation = (
       hidden: !workspace.betaFeatures.identities,
     },
     {
-      icon: Settings2,
+      icon: Gear,
       href: "/settings/general",
       label: "Settings",
       active: segments.at(0) === "settings",
@@ -124,7 +126,7 @@ export const createWorkspaceNavigation = (
 
 export const resourcesNavigation: NavItem[] = [
   {
-    icon: BookOpen,
+    icon: BookBookmark,
     href: "https://unkey.dev/docs",
     external: true,
     label: "Docs",

apps/dashboard/components.json

@@ -2,14 +2,20 @@
   "$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"
   }
 }
+