Sidebar 5

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Archive, BarChart, Settings, Help, Home, Star, TrendingUp } from "relume-icons";

const menuItems = [
  {
    title: "Home",
    url: "#",
    icon: Home,
  },
  {
    title: "Saved",
    url: "#",
    icon: Star,
  },
  {
    title: "Dashboard",
    subItems: [
      { title: "Trends", url: "#", icon: TrendingUp },
      { title: "Analytics", url: "#", icon: BarChart },
      { title: "Historical", url: "#", icon: Archive },
    ],
  },
  {
    title: "Settings",
    subItems: [
      { title: "Support", url: "#", icon: Help },
      { title: "Settings", url: "#", icon: Settings },
    ],
  },
];

export const Sidebar5 = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider>
      <Sidebar className="py-6" closeButtonClassName="fixed top-4 right-4 text-white">
        <SidebarHeader className="hidden lg:block">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
        </SidebarHeader>
        <SidebarContent className="mt-6">
          <SidebarMenu>
            {menuItems.map((item, index) => (
              <SidebarMenuItem key={index}>
                {item.subItems ? (
                  <div className="mt-2 flex flex-col">
                    <p className="text-regular p-2 font-semibold">{item.title}</p>
                    {item.subItems.map((subItem, subIndex) => (
                      <SidebarMenuButton asChild key={subIndex}>
                        <a href={subItem.url} className="flex w-full items-center">
                          <subItem.icon />
                          <span>{subItem.title}</span>
                        </a>
                      </SidebarMenuButton>
                    ))}
                  </div>
                ) : (
                  <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 className="flex w-full flex-col border border-scheme-border p-4">
            <p className="mb-2 font-semibold">Short heading here</p>
            <p className="text-small mb-3 lg:mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <Button size="sm">Button</Button>
          </div>
        </SidebarFooter>
      </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 gap-7 bg-white px-6 lg:hidden">
          <div className="flex items-center">
            <SidebarTrigger />
          </div>
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
        </nav>
        <div className="w-full pt-16 lg:pt-0">{children}</div>
      </main>
    </SidebarProvider>
  );
};