Sidebar 3

import React, { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar";
import {
  RelumeIcon,
  Settings,
  MoreHoriz,
  Description,
  Help,
  Home,
  Layers,
  PieChart,
  Search,
  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 Sidebar3 = ({ 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"}
      >
        {isMobile || state === "expanded" ? <ExpandedView /> : <CollapsedView />}
      </Sidebar>
      <main className="min-h-screen w-full">
        <nav className="fixed inset-x-0 top-0 z-10 flex min-h-16 items-center justify-between border-b border-scheme-border bg-white px-6 lg:hidden">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
          <div className="flex items-center">
            <SidebarTrigger />
          </div>
        </nav>
        <div className="w-full pt-16 lg:pt-0">{children}</div>
      </main>
    </>
  );
};

const LogoTrigger = () => {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <motion.div
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
      className="relative flex size-10 items-center justify-center"
    >
      <SidebarTrigger className="flex size-10 items-center justify-center">
        <AnimatePresence initial={false} mode="wait">
          {isHovered ? (
            <motion.div
              key="arrow"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15, ease: "easeInOut" }}
              className="absolute"
            >
              <SidebarMenuItem>
                <SidebarMenuButton className="border border-white">
                  <KeyboardDoubleArrowRight className="size-5 text-scheme-text" />
                </SidebarMenuButton>
              </SidebarMenuItem>
            </motion.div>
          ) : (
            <motion.div
              key="logo"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15, ease: "easeInOut" }}
              className="absolute self-start"
            >
              <RelumeIcon className="size-8 text-scheme-text" />
            </motion.div>
          )}
        </AnimatePresence>
      </SidebarTrigger>
    </motion.div>
  );
};

const ExpandedView = () => {
  return (
    <>
      <SidebarHeader className="flex flex-col gap-4 pt-6 lg:gap-6 lg:pt-0">
        <div className="flex items-center justify-between lg:h-10">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
          <SidebarTrigger>
            <SidebarMenuItem className="-mr-2">
              <SidebarMenuButton className="border border-white">
                <KeyboardDoubleArrowLeft className="hidden size-5 text-scheme-text lg:block" />
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarTrigger>
        </div>
        <SidebarInput
          placeholder="Search"
          icon={<Search className="size-6 text-scheme-text" />}
          iconPosition="left"
          className="pl-12"
        />
      </SidebarHeader>
      <SidebarContent className="mt-4 lg:mt-6">
        <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="flex flex-col gap-4 pb-6 lg:gap-6 lg:pb-0">
        <SidebarSeparator />
        <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>
        <SidebarSeparator />
        <div className="flex items-center justify-between">
          <div className="grid grid-cols-[max-content_1fr] items-center gap-3">
            <div>
              <img
                src="https://d22po4pjz3o32e.cloudfront.net/avatar-image.svg"
                alt="Avatar"
                className="size-10 rounded-full object-cover"
              />
            </div>
            <div>
              <p className="text-small font-medium">Name Surname</p>
              <p className="text-small">hello@relume.io</p>
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger>
              <MoreHoriz className="size-6 text-scheme-text" />
            </DropdownMenuTrigger>
            <DropdownMenuContent className="z-50" align="end" sideOffset={0}>
              <DropdownMenuLabel>My Profile</DropdownMenuLabel>
              <DropdownMenuLabel>Profile Settings</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Log Out</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </SidebarFooter>
    </>
  );
};

const CollapsedView = () => {
  return (
    <>
      <SidebarHeader className="flex flex-col gap-6 pt-6 lg:pt-0">
        <div className="flex items-center justify-center">
          <LogoTrigger />
        </div>
        <SidebarTrigger>
          <SidebarMenuItem className="h-[44px]">
            <SidebarMenuButton tooltip="Search">
              <Search className="size-6 text-scheme-text" />
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarTrigger>
      </SidebarHeader>
      <SidebarContent className="mt-6">
        <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" />
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>
      <SidebarFooter className="flex flex-col gap-4 pb-6 lg:gap-6 lg:pb-0">
        <SidebarSeparator />
        <div>
          {footerItems.map((item, index) => (
            <SidebarMenuItem key={index}>
              <SidebarMenuButton asChild tooltip={item.tooltip}>
                <a href={item.url} className="flex w-full items-center">
                  <item.icon className="text-scheme-text" />
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </div>
        <SidebarSeparator />
        <SidebarMenuButton size="lg" tooltip="Profile">
          <img
            src="https://d22po4pjz3o32e.cloudfront.net/avatar-image.svg"
            alt="Avatar"
            className="size-10 rounded-full object-cover"
          />
        </SidebarMenuButton>
      </SidebarFooter>
    </>
  );
};