claude-sidebar

1"use client";
2 
3import { useState } from "react";
4import {
5  Sidebar,
6  SidebarProvider,
7  SidebarHeader,
8  SidebarContent,
9  SidebarFooter,
10  SidebarMenu,
11  SidebarMenuItem,
12} from "@/components/ui/sidebar";
13 
14const EASE = "cubic-bezier(0.165,0.85,0.45,1)";
15const DURATION = 300;
16const EXPANDED = "18rem";
17const COLLAPSED = "3.3rem";
18 
19const recents = [
20  "Vinyl record collection organization",
21  "Sourdough starter troubleshooting",
22  "Plant care for low-light apartments",
23  "Travel itinerary for Kyoto in spring",
24  "Learning watercolor techniques",
25  "Building a custom mechanical keyboard",
26];
27 
28const starred = ["Designing a cozy reading nook"];
29 
30type NavItem = {
31  label: string;
32  icon: React.ReactNode;
33  shortcut?: string;
34};
35 
36export default function ClaudeSidebar() {
37  const [active, setActive] = useState("New chat");
38  const [collapsed, setCollapsed] = useState(false);
39 
40  const navItems: NavItem[] = [
41    { label: "New chat", icon: <PlusIcon />, shortcut: "Ctrl+⇧+O" },
42    { label: "Search", icon: <SearchIcon />, shortcut: "Ctrl+K" },
43    { label: "Chats", icon: <ChatsIcon /> },
44    { label: "Projects", icon: <ProjectsIcon /> },
45    { label: "Code", icon: <CodeIcon /> },
46    { label: "Customize", icon: <CustomizeIcon /> },
47    { label: "Design", icon: <DesignIcon /> },
48  ];
49 
50  return (
51    <div className="relative flex h-full min-h-[520px]">
52      <SidebarProvider
53        defaultOpen
54        className="min-h-0! h-full w-fit"
55        style={{ "--sidebar-width": EXPANDED } as React.CSSProperties}
56      >
57        <div
58          className="shrink-0 overflow-hidden"
59          style={{
60            width: collapsed ? COLLAPSED : EXPANDED,
61            transition: `width ${DURATION}ms ${EASE}`,
62          }}
63        >
64          <Sidebar
65            collapsible="none"
66            className="flex h-full min-h-[520px] w-full! flex-col bg-sidebar text-sidebar-foreground border-r border-sidebar-border"
67            style={{ transition: `background-color 35ms ${EASE}` }}
68          >
69            <SidebarHeader className="relative flex-row! w-full items-center gap-0! p-2! pt-2 h-12 shrink-0">
70              <div
71                className="flex items-center gap-1.5 pl-2 h-8 overflow-clip"
72                style={{
73                  transition: `opacity 150ms ${EASE}`,
74                  opacity: collapsed ? 0 : 1,
75                  pointerEvents: collapsed ? "none" : "auto",
76                }}
77              >
78                <ClaudeWordmark />
79              </div>
80// … truncated