chore: add chevrons, theme toggle & UI style tweaks

src/components/blocks/header-1.astro

@@ -144,13 +144,18 @@ const desktopMenuItemClass =
           menus?.map((menu) => (
             <SidebarMenuItem>
               {menu.links && menu.links.length > 0 ? (
-                <Collapsible>
+                <Collapsible class="group">
                   <CollapsibleTrigger>
                     <SidebarMenuButton
                       as="div"
-                      class="h-10 rounded-md px-4 text-xl"
+                      class="h-10 rounded-md text-xl"
                     >
-                      {menu.text}
+                      <span class="truncate">{menu.text}</span>
+                      <Icon
+                        name="chevron-down"
+                        class="ml-auto text-muted-foreground transition-transform duration-200 ease-out group-open:rotate-180"
+                        aria-hidden="true"
+                      />
                     </SidebarMenuButton>
                   </CollapsibleTrigger>
                   <CollapsibleContent>
@@ -167,7 +172,7 @@ const desktopMenuItemClass =
                 </Collapsible>
               ) : (
                 <SidebarMenuButton
-                  class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
+                  class="h-10 w-full rounded-md text-xl"
                   href={menu.href}
                 >
                   {menu.text}
@@ -192,6 +197,7 @@ const desktopMenuItemClass =
         }
       </HeaderActions>
       <HeaderActions>
+        <ThemeToggle />
         {
           socials?.map((social) => (
             <Button as="a" variant="ghost" size="icon" href={social}>

src/components/blocks/header-2.astro

@@ -142,9 +142,16 @@ const desktopMenuItemClass =
           menus?.map((menu) => (
             <SidebarMenuItem>
               {menu.links && menu.links.length > 0 ? (
-                <Collapsible>
+                <Collapsible class="group">
                   <CollapsibleTrigger>
-                    <SidebarMenuButton as="div">{menu.text}</SidebarMenuButton>
+                    <SidebarMenuButton as="div" class="h-10 w-full rounded-md text-xl">
+                      <span class="truncate">{menu.text}</span>
+                      <Icon
+                        name="chevron-down"
+                        class="ml-auto text-muted-foreground transition-transform duration-200 ease-out group-open:rotate-180"
+                        aria-hidden="true"
+                      />
+                    </SidebarMenuButton>
                   </CollapsibleTrigger>
                   <CollapsibleContent>
                     <SidebarMenuSub>
@@ -160,7 +167,7 @@ const desktopMenuItemClass =
                 </Collapsible>
               ) : (
                 <SidebarMenuButton
-                  class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
+                  class="h-10 w-full rounded-md text-xl"
                   href={menu.href}
                 >
                   {menu.text}

src/components/blocks/header-3.astro

@@ -189,13 +189,18 @@ const desktopMenuItemClass =
           menus?.map((menu) => (
             <SidebarMenuItem>
               {menu.links && menu.links.length > 0 ? (
-                <Collapsible>
+                <Collapsible class="group">
                   <CollapsibleTrigger>
                     <SidebarMenuButton
                       as="div"
-                      class="h-10 rounded-md px-4 text-xl"
+                      class="h-10 w-full rounded-md text-xl"
                     >
-                      {menu.text}
+                      <span class="truncate">{menu.text}</span>
+                      <Icon
+                        name="chevron-down"
+                        class="ml-auto text-muted-foreground transition-transform duration-200 ease-out group-open:rotate-180"
+                        aria-hidden="true"
+                      />
                     </SidebarMenuButton>
                   </CollapsibleTrigger>
                   <CollapsibleContent>
@@ -212,7 +217,7 @@ const desktopMenuItemClass =
                 </Collapsible>
               ) : (
                 <SidebarMenuButton
-                  class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
+                  class="h-10 w-full rounded-md text-xl"
                   href={menu.href}
                 >
                   {menu.text}

src/components/ui/navigation-menu/navigation-menu-viewport.astro

@@ -13,7 +13,7 @@ Intentionally differs from shadcn/bejamas to keep transitions smooth in this Ast
 <div
   data-slot="navigation-menu-viewport-positioner"
   class={cn(
-    "absolute left-0 top-full isolate z-50 flex justify-center transition-[left,top] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0"
+    "absolute left-0 top-full isolate z-50 transition-[left,top] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-ending-style:opacity-0"
   )}
 >
   <div

src/components/ui/sheet/sheet-content.astro

@@ -28,7 +28,7 @@ const dialogVariants = cva(
 )
 
 const contentVariants = cva(
-  "bg-background flex h-full flex-col gap-4 shadow-lg transition-transform duration-500 ease-in-out",
+  "bg-background text-foreground flex h-full flex-col gap-4 shadow-lg transition-transform duration-500 ease-in-out",
   {
     variants: {
       side: {

src/components/ui/sidebar/sidebar-menu-button.astro

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const variants = cva(
-  "hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring active:bg-accent active:text-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring active:text-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md text-left text-sm outline-hidden transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {

src/components/ui/sidebar/sidebar-menu-sub.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <ul
   data-slot="sidebar-menu-sub"
   class={cn(
-    "border-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+    "border-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
     className
   )}
   {...props}

src/content/pages/blocks/header.md

@@ -5,7 +5,7 @@ description: Here you can find all the header blocks available in the library.
 refs:
   - /src/content/pages/blocks/header-1.md
   - /src/content/pages/blocks/header-2.md
-  - /src/content/pages/blocks/header-2.md
+  - /src/content/pages/blocks/header-3.md
 seo:
   title: Header blocks - fulldev/ui
   description: Here you can find all the header blocks available in the library.