---interface SidebarItem {  label: string;  href: string;} interface Props {  items: SidebarItem[];  variant?: "expanded" | "collapsed";  class?: string;} const {  items,  variant = "expanded",  class: className = "",} = Astro.props;--- <aside  class={`sidebar ${variant === "collapsed" ? "collapsed" : ""} ${className}`}>  <div class="sidebar-header">    <span class="sidebar-label text-sm font-medium">Navigation</span>    <button class="sidebar-toggle-btn" aria-label="Toggle sidebar">      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">        <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path>      </svg>    </button>  </div>   <nav class="flex-1 py-4 overflow-y-auto">    <ul class="flex flex-col gap-1 px-2">      {items.map((item) => (        <li>          <a href={item.href} class="sidebar-link" title={item.label}>            <svg class="shrink-0" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">              <circle cx="128" cy="128" r="48"></circle>            </svg>            <span class="sidebar-label text-sm">{item.label}</span>          </a>        </li>      ))}    </ul>  </nav></aside> <script>  document.querySelectorAll(".sidebar").forEach((sidebar) => {    const toggleBtn = sidebar.querySelector(".sidebar-toggle-btn");    toggleBtn?.addEventListener("click", () => {      sidebar.classList.toggle("collapsed");    });  });</script> 
    
  

    
      <Sidebar  items={[    { label: "Dashboard", href: "#" },    { label: "Settings", href: "#" },    { label: "Profile", href: "#" },  ]}/>
    
  

    
      <Sidebar  variant="collapsed"  items={[    { label: "Dashboard", href: "#" },    { label: "Settings", href: "#" },    { label: "Profile", href: "#" },  ]}/>