Sidebar 9

import { Badge } from "@/components/ui/badge";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar";
import {
  Settings,
  Description,
  Help,
  Home,
  Layers,
  PieChart,
  Star,
  KeyboardDoubleArrowLeft,
  KeyboardDoubleArrowRight,
} from "relume-icons";

const menuItems = [
  { title: "Home", url: "#", icon: Home },
  { title: "Saved", url: "#", icon: Star },
  { title: "Dashboard", url: "#", icon: PieChart },
  { title: "Projects", url: "#", icon: Layers },
  { title: "Documents", url: "#", icon: Description },
];

const footerItems = [
  {
    title: "Support",
    url: "#",
    icon: Help,
    tooltip: "Support",
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings,
    tooltip: "Settings",
  },
];

export const Sidebar9 = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider
      defaultOpen={true}
      style={{ "--sidebar-width-icon": "4.5rem" } as React.CSSProperties}
    >
      <SidebarWrapper>{children}</SidebarWrapper>
    </SidebarProvider>
  );
};

const SidebarWrapper = ({ children }: { children: React.ReactNode }) => {
  const { state, isMobile } = useSidebar();
  return (
    <>
      <Sidebar
        className="py-6"
        collapsible={isMobile ? "offcanvas" : state === "collapsed" ? "icon" : "offcanvas"}
        closeButtonClassName="fixed top-4 right-4 text-white"
      >
        {isMobile || state === "expanded" ? <ExpandedView /> : <CollapsedView />}
      </Sidebar>
      <main className="min-h-screen w-full">
        <nav className="fixed top-0 right-0 left-0 flex min-h-16 items-center justify-start bg-white px-6 lg:hidden">
          <SidebarTrigger />
        </nav>
        <div className="w-full pt-16 lg:pt-0">{children}</div>
      </main>
    </>
  );
};

const ExpandedView = () => {
  return (
    <>
      <SidebarHeader className="hidden pt-6 lg:block lg:pt-0">
        <div className="flex items-center justify-between">
          <div />
          <SidebarTrigger>
            <SidebarMenuItem className="-mr-2">
              <SidebarMenuButton className="size-10 border border-white">
                <KeyboardDoubleArrowLeft className="hidden size-6 text-scheme-text lg:block" />
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarTrigger>
        </div>
      </SidebarHeader>
      <SidebarContent className="mt-6 lg:mt-2">
        <SidebarMenu>
          {menuItems.map((item, index) => (
            <SidebarMenuItem key={index} className="flex w-full items-center justify-between">
              <SidebarMenuButton asChild>
                <a href={item.url} className="flex w-full items-center">
                  <item.icon className="text-scheme-text" />
                  <span>{item.title}</span>
                  {index === 1 && (
                    <Badge variant="outline" className="ml-auto !rounded-[5rem] py-0">
                      {" "}
                      24
                    </Badge>
                  )}
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>
      <SidebarFooter className="pb-6 lg:pb-0">
        <div>
          {footerItems.map((item, index) => (
            <SidebarMenuItem key={index}>
              <SidebarMenuButton asChild>
                <a href={item.url} className="flex w-full items-center">
                  <item.icon className="text-scheme-text" />
                  <span>{item.title}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </div>
      </SidebarFooter>
    </>
  );
};

const CollapsedView = () => {
  return (
    <>
      <SidebarHeader className="pt-6 lg:pt-0">
        <SidebarTrigger className="flex items-center justify-center">
          <SidebarMenuItem>
            <SidebarMenuButton className="size-10 border border-white">
              <KeyboardDoubleArrowRight className="size-6 text-scheme-text lg:block" />
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarTrigger>
      </SidebarHeader>
      <SidebarContent className="mt-6 lg:mt-2">
        <SidebarMenu>
          {menuItems.map((item, index) => (
            <SidebarMenuItem key={index}>
              <SidebarMenuButton
                className="flex size-10 items-center justify-center"
                asChild
                tooltip={item.title}
              >
                <a href={item.url}>
                  <item.icon className="size-5 text-scheme-text" />
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>
      <SidebarFooter className="pb-6 lg:pb-0">
        <div>
          {footerItems.map((item, index) => (
            <SidebarMenuItem key={index}>
              <SidebarMenuButton asChild>
                <a href={item.url} className="flex w-full items-center">
                  <item.icon className="text-scheme-text" />
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </div>
      </SidebarFooter>
    </>
  );
};