tynanpurdy.com
Fork of atp.tools as a universal profile for people on the ATmosphere
1import { AtSign, FireExtinguisher, Gauge, Home } from "lucide-react";
2
3import {
4 Sidebar,
5 SidebarContent,
6 SidebarFooter,
7 SidebarGroup,
8 SidebarGroupContent,
9 SidebarGroupLabel,
10 SidebarHeader,
11 SidebarMenu,
12 SidebarMenuButton,
13 SidebarMenuItem,
14 SidebarRail,
15} from "@/components/ui/sidebar";
16import { SmartSearchBar } from "./smartSearchBar";
17import { ColorToggle } from "./themeSwitcher";
18import { Link } from "@tanstack/react-router";
19import { ForwardRefExoticComponent, ReactNode } from "preact/compat";
20import { FontPicker } from "./fontPicker";
21import { NavUser } from "./auth/navUser";
22import { ExternalLinksRow } from "./sidebarLinks";
23
24type BaseMenuItem = {
25 url: string;
26};
27
28type IconMenuItem = BaseMenuItem & {
29 type: "icon";
30 title: string;
31 icon: ForwardRefExoticComponent<any>;
32 className?: string;
33};
34
35type ComponentMenuItem = BaseMenuItem & {
36 type: "component";
37 component: ReactNode;
38};
39
40type MenuItem = IconMenuItem | ComponentMenuItem;
41
42// Menu items.
43const items: MenuItem[] = [
44 {
45 type: "icon",
46 title: "Home",
47 url: "/",
48 icon: Home,
49 },
50 {
51 type: "icon",
52 title: "Jetstream",
53 url: "/jetstream",
54 icon: FireExtinguisher,
55 },
56 {
57 type: "icon",
58 title: "Counter",
59 url: "/counter",
60 icon: Gauge,
61 },
62];
63
64export function AppSidebar() {
65 return (
66 <Sidebar collapsible="offcanvas">
67 <SidebarContent>
68 <SidebarHeader className="-my-4">
69 <div className="flex items-center text-3xl px-2 pt-4">
70 <AtSign className="text-blue-500 mr-1 mt-1" height={36} />
71 tools
72 </div>
73 </SidebarHeader>
74 <SidebarGroup>
75 <SidebarGroupLabel>
76 Search{" "}
77 <div className="text-xs ml-1 text-center bg-muted-foreground text-muted rounded-full aspect-square h-4 w-4">
78 ?
79 </div>
80 </SidebarGroupLabel>
81 <SidebarGroupContent>
82 <SmartSearchBar isKeybindEnabled={true} />
83 </SidebarGroupContent>
84 </SidebarGroup>
85 <SidebarGroup className="-my-4">
86 <SidebarGroupLabel>Application</SidebarGroupLabel>
87 <SidebarGroupContent>
88 <SidebarMenu>
89 {items.map((item) =>
90 item.type === "component" ? (
91 <SidebarMenuItem key={item.url}>
92 <Link to={item.url}>{item.component}</Link>
93 </SidebarMenuItem>
94 ) : (
95 <SidebarMenuItem key={item.title}>
96 <SidebarMenuButton asChild className={item.className}>
97 <Link to={item.url}>
98 <item.icon />
99 <span>{item.title}</span>
100 </Link>
101 </SidebarMenuButton>
102 </SidebarMenuItem>
103 ),
104 )}
105 </SidebarMenu>
106 </SidebarGroupContent>
107 </SidebarGroup>
108 </SidebarContent>
109 <SidebarFooter>
110 <NavUser />
111 <div className="flex min-w-full">
112 <FontPicker />
113 <ColorToggle />
114 </div>
115 <ExternalLinksRow />
116 </SidebarFooter>
117 <SidebarRail />
118 </Sidebar>
119 );
120}