Glass App Shell Block

1import { BarChart3, FolderKanban, Home, Settings } from "lucide-react";
2 
3import { NavigationBlock } from "@/components/ui/blocks/phase8/navigation-block";
4import {
5  Sidebar,
6  SidebarContent,
7  SidebarGroup,
8  SidebarMenu,
9  SidebarMenuItem,
10} from "@/components/ui/organisms/sidebar";
11 
12function GlassAppShellBlock({ children }: { children?: React.ReactNode }) {
13  return (
14    <section
15      data-slot="glass-app-shell-block"
16      className="@container/app-shell overflow-hidden rounded-xl border border-glass-border-outer bg-surface-subtle p-2"
17    >
18      <NavigationBlock className="sticky top-0 z-20" />
19      <div className="grid min-h-[30rem] grid-cols-1 gap-2 pt-2 @lg/app-shell:grid-cols-[13rem_minmax(0,1fr)]">
20        <Sidebar
21          variant="inset"
22          className="hidden h-full w-full bg-glass shadow-[var(--poyraz-glass-shadow)] backdrop-blur-glass @lg/app-shell:flex"
23        >
24          <SidebarContent>
25            <SidebarGroup>
26              <SidebarMenu>
27                <SidebarMenuItem active icon={<Home className="size-4" />}>
28                  Home
29                </SidebarMenuItem>
30                <SidebarMenuItem icon={<FolderKanban className="size-4" />}>
31                  Projects
32                </SidebarMenuItem>
33                <SidebarMenuItem icon={<BarChart3 className="size-4" />}>Analytics</SidebarMenuItem>
34                <SidebarMenuItem icon={<Settings className="size-4" />}>Settings</SidebarMenuItem>
35              </SidebarMenu>
36            </SidebarGroup>
37          </SidebarContent>
38        </Sidebar>
39        <main className="min-w-0 rounded-lg border border-border bg-background p-3 @sm/app-shell:p-5">
40          {children ?? (
41            <div className="grid min-h-64 place-items-center text-sm text-muted-foreground">
42              Application content
43            </div>
44          )}
45        </main>
46      </div>
47    </section>
48  );
49}
50 
51export { GlassAppShellBlock };