From 63577c0cf61610bee4251818dc9cd700056645db Mon Sep 17 00:00:00 2001
From: blackstarxr253 <blackstarxr253@gmail.com>
Date: Tue, 17 Dec 2024 09:06:09 -0700
Subject: [PATCH 1/2] make nav items without children render as
 SidebarMenuButton

---
 .../public/r/styles/default/sidebar-07.json   |  2 +-
 .../public/r/styles/new-york/sidebar-07.json  |  2 +-
 .../blocks/sidebar-07/components/nav-main.tsx | 67 +++++++++++--------
 .../blocks/sidebar-07/components/nav-main.tsx | 67 +++++++++++--------
 4 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/apps/www/public/r/styles/default/sidebar-07.json b/apps/www/public/r/styles/default/sidebar-07.json
index d113c0c9fa0..01f372b9dba 100644
--- a/apps/www/public/r/styles/default/sidebar-07.json
+++ b/apps/www/public/r/styles/default/sidebar-07.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-07/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n\t\t\t\t\titem.items ? (\n\t\t\t\t\t\t<Collapsible\n\t\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\n\t\t\t\t\t\t\tclassName=\"group/collapsible\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton tooltip={item.title}>\n\t\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t<ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t\t<CollapsibleContent>\n\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\n\t\t\t\t\t\t\t\t\t\t{item.items?.map((subItem) => (\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem key={subItem.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href={subItem.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\n\t\t\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t\t</Collapsible>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SidebarMenuItem key={item.title}>\n\t\t\t\t\t\t\t<SidebarMenuButton asChild>\n\t\t\t\t\t\t\t\t<a href={item.url}>\n\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t),\n\t\t\t\t)}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/public/r/styles/new-york/sidebar-07.json b/apps/www/public/r/styles/new-york/sidebar-07.json
index ba635c5070b..7bbdbe32bc2 100644
--- a/apps/www/public/r/styles/new-york/sidebar-07.json
+++ b/apps/www/public/r/styles/new-york/sidebar-07.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-07/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n\t\t\t\t\titem.items ? (\n\t\t\t\t\t\t<Collapsible\n\t\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\n\t\t\t\t\t\t\tclassName=\"group/collapsible\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton tooltip={item.title}>\n\t\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t<ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t\t<CollapsibleContent>\n\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\n\t\t\t\t\t\t\t\t\t\t{item.items?.map((subItem) => (\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem key={subItem.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href={subItem.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\n\t\t\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t\t</Collapsible>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SidebarMenuItem key={item.title}>\n\t\t\t\t\t\t\t<SidebarMenuButton asChild>\n\t\t\t\t\t\t\t\t<a href={item.url}>\n\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t),\n\t\t\t\t)}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
index 0856dbceb07..aceb1ac6440 100644
--- a/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
+++ b/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
@@ -36,37 +36,48 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible
-            key={item.title}
-            asChild
-            defaultOpen={item.isActive}
-            className="group/collapsible"
-          >
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
+        {items.map((item) =>
+          item.items ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={item.title}>
+                    {item.icon && <item.icon />}
+                    <span>{item.title}</span>
+                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items?.map((subItem) => (
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton asChild>
+                          <a href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
                   {item.icon && <item.icon />}
                   <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <a href={subItem.url}>
-                          <span>{subItem.title}</span>
-                        </a>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
+                </a>
+              </SidebarMenuButton>
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          )
+        )}
       </SidebarMenu>
     </SidebarGroup>
   )
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
index cb11e74d085..a9f27c59253 100644
--- a/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
@@ -36,37 +36,48 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible
-            key={item.title}
-            asChild
-            defaultOpen={item.isActive}
-            className="group/collapsible"
-          >
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
+        {items.map((item) =>
+          item.items ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={item.title}>
+                    {item.icon && <item.icon />}
+                    <span>{item.title}</span>
+                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items?.map((subItem) => (
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton asChild>
+                          <a href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
                   {item.icon && <item.icon />}
                   <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <a href={subItem.url}>
-                          <span>{subItem.title}</span>
-                        </a>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
+                </a>
+              </SidebarMenuButton>
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          )
+        )}
       </SidebarMenu>
     </SidebarGroup>
   )

From 1dc5a0623953c901ebbfac9f6bf12b11ca942ac1 Mon Sep 17 00:00:00 2001
From: blackstarxr253 <blackstarxr253@gmail.com>
Date: Tue, 17 Dec 2024 09:42:13 -0700
Subject: [PATCH 2/2] apply to sidebar-08

---
 .../public/r/styles/default/sidebar-07.json   |  2 +-
 .../public/r/styles/default/sidebar-08.json   |  2 +-
 .../public/r/styles/new-york/sidebar-07.json  |  2 +-
 .../public/r/styles/new-york/sidebar-08.json  |  2 +-
 .../blocks/sidebar-08/components/nav-main.tsx | 67 ++++++++++---------
 .../blocks/sidebar-08/components/nav-main.tsx | 67 ++++++++++---------
 6 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/apps/www/public/r/styles/default/sidebar-07.json b/apps/www/public/r/styles/default/sidebar-07.json
index 01f372b9dba..cce746f5726 100644
--- a/apps/www/public/r/styles/default/sidebar-07.json
+++ b/apps/www/public/r/styles/default/sidebar-07.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-07/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n\t\t\t\t\titem.items ? (\n\t\t\t\t\t\t<Collapsible\n\t\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\n\t\t\t\t\t\t\tclassName=\"group/collapsible\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton tooltip={item.title}>\n\t\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t<ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t\t<CollapsibleContent>\n\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\n\t\t\t\t\t\t\t\t\t\t{item.items?.map((subItem) => (\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem key={subItem.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href={subItem.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\n\t\t\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t\t</Collapsible>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SidebarMenuItem key={item.title}>\n\t\t\t\t\t\t\t<SidebarMenuButton asChild>\n\t\t\t\t\t\t\t\t<a href={item.url}>\n\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t),\n\t\t\t\t)}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) =>\n          item.items ? (\n            <Collapsible\n              key={item.title}\n              asChild\n              defaultOpen={item.isActive}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton tooltip={item.title}>\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton asChild>\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          )\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/public/r/styles/default/sidebar-08.json b/apps/www/public/r/styles/default/sidebar-08.json
index 53e74c17a4b..d9fad5928ef 100644
--- a/apps/www/public/r/styles/default/sidebar-08.json
+++ b/apps/www/public/r/styles/default/sidebar-08.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-08/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n          item.items ? (\n            <Collapsible\n              key={item.title}\n              asChild\n              defaultOpen={item.isActive}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton tooltip={item.title}>\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton asChild>\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          )\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/public/r/styles/new-york/sidebar-07.json b/apps/www/public/r/styles/new-york/sidebar-07.json
index 7bbdbe32bc2..0f95705dee8 100644
--- a/apps/www/public/r/styles/new-york/sidebar-07.json
+++ b/apps/www/public/r/styles/new-york/sidebar-07.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-07/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n\t\t\t\t\titem.items ? (\n\t\t\t\t\t\t<Collapsible\n\t\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\n\t\t\t\t\t\t\tclassName=\"group/collapsible\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SidebarMenuItem>\n\t\t\t\t\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton tooltip={item.title}>\n\t\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t<ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t\t<CollapsibleContent>\n\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\n\t\t\t\t\t\t\t\t\t\t{item.items?.map((subItem) => (\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem key={subItem.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href={subItem.url}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\n\t\t\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t\t</Collapsible>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SidebarMenuItem key={item.title}>\n\t\t\t\t\t\t\t<SidebarMenuButton asChild>\n\t\t\t\t\t\t\t\t<a href={item.url}>\n\t\t\t\t\t\t\t\t\t{item.icon && <item.icon />}\n\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t),\n\t\t\t\t)}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) =>\n          item.items ? (\n            <Collapsible\n              key={item.title}\n              asChild\n              defaultOpen={item.isActive}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton tooltip={item.title}>\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton asChild>\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          )\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/public/r/styles/new-york/sidebar-08.json b/apps/www/public/r/styles/new-york/sidebar-08.json
index 04326309403..12cc3d74ddc 100644
--- a/apps/www/public/r/styles/new-york/sidebar-08.json
+++ b/apps/www/public/r/styles/new-york/sidebar-08.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "blocks/sidebar-08/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n      {items.map((item) =>\n          item.items ? (\n            <Collapsible\n              key={item.title}\n              asChild\n              defaultOpen={item.isActive}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton tooltip={item.title}>\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton asChild>\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          )\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
index 10b836a2e3d..2a3e493a428 100644
--- a/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
+++ b/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
@@ -37,41 +37,48 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip={item.title}>
+        {items.map((item) =>
+          item.items ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={item.title}>
+                    {item.icon && <item.icon />}
+                    <span>{item.title}</span>
+                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items?.map((subItem) => (
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton asChild>
+                          <a href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
                 <a href={item.url}>
-                  <item.icon />
+                  {item.icon && <item.icon />}
                   <span>{item.title}</span>
                 </a>
               </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <ChevronRight />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          )
+        )}
       </SidebarMenu>
     </SidebarGroup>
   )
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
index 34737f61628..a5c06fe29f8 100644
--- a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
@@ -37,41 +37,48 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip={item.title}>
+        {items.map((item) =>
+          item.items ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton tooltip={item.title}>
+                    {item.icon && <item.icon />}
+                    <span>{item.title}</span>
+                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items?.map((subItem) => (
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton asChild>
+                          <a href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
                 <a href={item.url}>
-                  <item.icon />
+                  {item.icon && <item.icon />}
                   <span>{item.title}</span>
                 </a>
               </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <ChevronRight />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
+          )
+        )}
       </SidebarMenu>
     </SidebarGroup>
   )