Cleaning up the sidebar menu

Author: Tony Lea

resources/js/Components/AppSidebar.tsx

@@ -104,7 +104,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             </SidebarHeader>
             <SidebarContent>
                 <NavMain items={data.navMain} />
-                <NavProjects projects={data.projects} />
                 <NavSecondary items={data.navSecondary} className="mt-auto" />
             </SidebarContent>
             <SidebarFooter>

resources/js/Components/NavMain.tsx

@@ -48,42 +48,6 @@ export function NavMain({
                     </SidebarMenuItem>
                 </SidebarMenu>
             </SidebarGroup>
-            <SidebarGroup>
-                <SidebarGroupLabel>Example Group</SidebarGroupLabel>
-                <SidebarMenu>
-                    {items.map((item) => (
-                        <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>
-                    ))}
-                </SidebarMenu>
-            </SidebarGroup>
         </>
     )
 }

resources/js/Components/NavUser.tsx

@@ -4,6 +4,7 @@ import {
     ChevronsUpDown,
     LogOut,
     SquareUserRound,
+    Settings
 } from "lucide-react"
 
 import {
@@ -89,8 +90,8 @@ export function NavUser() {
                                     href={route('profile.edit')}
                                     as="button"
                                 >
-                                    <SquareUserRound />
-                                    Profile
+                                    <Settings />
+                                    Settings
                                 </Link>
                             </DropdownMenuItem>
                         </DropdownMenuGroup>