warpbox-dev/docs/Mock-Up/Mockup Magic/src/components/layout/AppShell.tsx

import { Link, useRouterState } from "@tanstack/react-router";
import {
  LayoutDashboard,
  FolderOpen,
  Share2,
  Settings,
  Shield,
  Files,
  Users,
  HardDrive,
  ScrollText,
  Gauge,
  Box,
} from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
  SidebarHeader,
} from "@/components/ui/sidebar";
import { MockupNav } from "./MockupNav";

const userItems = [
  { to: "/app/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { to: "/app/files", label: "My files", icon: FolderOpen },
  { to: "/app/shared", label: "Shared links", icon: Share2 },
  { to: "/app/settings", label: "Settings", icon: Settings },
];
const adminItems = [
  { to: "/admin/overview", label: "Overview", icon: Gauge },
  { to: "/admin/files", label: "Files", icon: Files },
  { to: "/admin/users", label: "Users", icon: Users },
  { to: "/admin/storage", label: "Storage", icon: HardDrive },
  { to: "/admin/logs", label: "Logs", icon: ScrollText },
  { to: "/admin/settings", label: "Settings", icon: Settings },
];

export function AppShell({
  variant,
  title,
  children,
}: {
  variant: "user" | "admin";
  title: string;
  children: React.ReactNode;
}) {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const items = variant === "admin" ? adminItems : userItems;

  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full">
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <Link to="/" className="flex items-center gap-2 px-2 py-1.5 font-semibold">
              <Box className="h-5 w-5 text-primary" />
              <span>warpbox.dev</span>
            </Link>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>{variant === "admin" ? "Admin" : "Workspace"}</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((it) => (
                    <SidebarMenuItem key={it.to}>
                      <SidebarMenuButton asChild isActive={pathname === it.to}>
                        <Link to={it.to} className="flex items-center gap-2">
                          <it.icon className="h-4 w-4" />
                          <span>{it.label}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
            {variant === "user" && (
              <SidebarGroup>
                <SidebarGroupLabel>Other</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    <SidebarMenuItem>
                      <SidebarMenuButton asChild>
                        <Link to="/admin/overview" className="flex items-center gap-2">
                          <Shield className="h-4 w-4" />
                          <span>Admin</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            )}
          </SidebarContent>
        </Sidebar>

        <div className="flex flex-1 flex-col">
          <header className="flex h-14 items-center gap-3 border-b bg-background px-4">
            <SidebarTrigger />
            <h1 className="text-sm font-medium text-foreground">{title}</h1>
            <div className="ml-auto flex items-center gap-2">
              <MockupNav />
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
                A
              </div>
            </div>
          </header>
          <main className="flex-1 bg-muted/30 p-4 md:p-6">{children}</main>
        </div>
      </div>
    </SidebarProvider>
  );
}