I need to edit sidebar: add sublinks
like: Home > Home1, Home2

Use tailwind,

import { collapase, logo, logoIcon, ProfileImage } from "@/assets";
import { getNavigationLinks } from "@/constant/sidelinks";
import { cn } from "@/lib/utils";
import { Menu, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Button } from "./custom/button";
import { Layout } from "./custom/layout";
import Nav from "./nav";
import ProfileCard from "./Profile/Profile";
type Props = {
className?: string;
isCollapsed: boolean;
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
};
function UserSidebar({ className, isCollapsed, setIsCollapsed }: Props) {
const [navOpened, setNavOpened] = useState(false);
useEffect(() => {
if (navOpened) {
document.body.classList.add("overflow-hidden");
} else {
document.body.classList.remove("overflow-hidden");
}
}, [navOpened]);

return (
<aside
className={cn(
z-[1000] bg-primary border-r-2 h-full w-full duration-75 xl:block md:w-[272px] border-r-muted md:bottom-0 md:right-auto md:h-svh,
!isCollapsed && "w-full md:w-[272px] md:max-w-[272px] absolute ",
isCollapsed && "md:w-[96px] md:max-w-[96px]",
className
)}
>
<div
onClick={() => setNavOpened(false)}
className={absolute inset-0 transition-[opacity] delay-100 duration-700 ${ navOpened ? "h-svh opacity-50" : "h-0 opacity-0" } w-full bg-black md:hidden}
/>

  <Layout fixed className={navOpened ? "h-svh" : ""}>  
    <Layout.Header  
      sticky  
      className="z-50 bg-primary flex items-center justify-between px-4 py-3 shadow-sm md:px-4 md:py-[32px]"  
    >  
      <div className="flex items-center gap-2 w-full justify-center">  
        <Link  
          prefetch={false}  
          href="/dashboard"  
          className="flex items-center "  
        >  
          <Image  
            src={isCollapsed ? logoIcon : logo}  
            alt="vacha"  
            width={isCollapsed ? 50 : 158}  
            height={isCollapsed ? 50 : 100}  
            className={  
              isCollapsed ? " h-[30ox]" : "h-[30px]  object-contain"  
            }  
          />  
        </Link>  
      </div>  

      <Button  
        variant="ghost"  
        size="icon"  
        className="md:hidden"  
        aria-label="Toggle Navigation"  
        aria-controls="sidebar-menu"  
        aria-expanded={navOpened}  
        onClick={() => setNavOpened((prev) => !prev)}  
      >  
        {navOpened ? <X /> : <Menu />}  
      </Button>  
    </Layout.Header>  

    <Nav  
      id="sidebar-menu"  
      className={cn(  
        "z-40 h-full bg-primary flex-1 overflow-auto",  
        navOpened ? "max-h-screen" : "max-h-0 py-0 md:max-h-screen"  
      )}  
      closeNav={() => setNavOpened(false)}  
      isCollapsed={isCollapsed}  
      links={getNavigationLinks(true)}  
    />  

    <div className={cn("p-4", isCollapsed ? "flex justify-center" : "")}>  
      <Button  
        onClick={() => {  
          setIsCollapsed((prev) => !prev);  
        }}  
        variant="secondary"  
        className={cn(  
          "w-full transition-all duration-500 bg-primary-foreground  hover:bg-primary-foreground stroke-secondary   text-secondary  ",  
          isCollapsed  
            ? "h-[48px] w-[56px] rounded-lg p-0"  
            : "h-[48px] justify-start gap-3 rounded-lg px-4"  
        )}  
        title="Collapsed View"  
      >  
        {" "}  
        <Image  
          className={cn(  
            "size-[18px] transition-transform duration-500",  
            !isCollapsed  
              ? "rotate-0"  
              : "rotate-180 filter invert brightness-0"  
          )}  
          src={collapase}  
          alt="close"  
        />  
        {!isCollapsed && (  
          <span className="font-normal">Collapsed View</span>  
        )}  
      </Button>  
    </div>  

    <div className={cn("p-4 pt-0", isCollapsed ? "flex justify-center" : "")}>  
      <ProfileCard  
        email="jonhwilson@gmail.com"  
        imageUrl={ProfileImage}  
        name="John Wilson"  
        isCollapsed={isCollapsed}  
      />  
    </div>  
  </Layout>  
</aside>  

);
}

export default UserSidebar;