update menu

apps/admin.saladeaula.digital/app/components/app-sidebar.tsx

@@ -68,11 +68,11 @@ const data = {
 
 export function AppSidebar({ orgs = [] }) {
   return (
-    <Sidebar>
-      <SidebarHeader className="p-4">
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
         <OrgSwitcher orgs={orgs} />
       </SidebarHeader>
-      <SidebarContent className="px-2">
+      <SidebarContent>
         <NavMain data={data} />
       </SidebarContent>
       <SidebarFooter />

apps/admin.saladeaula.digital/app/components/org-switcher.tsx

@@ -18,8 +18,10 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarRail,
   useSidebar
 } from '@repo/ui/components/ui/sidebar'
+import { initials } from '@repo/ui/lib/utils'
 
 type Org = {
   id: string
@@ -29,7 +31,7 @@ type Org = {
 
 export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
   const location = useLocation()
-  const { isMobile } = useSidebar()
+  const { isMobile, state } = useSidebar()
   const { orgid } = useParams()
   const org = orgs.find((org) => org.id === orgid) as Org
   const [activeOrg, setActiveOrg] = useState<Org>(org)
@@ -47,8 +49,14 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground bg-secondary hover:bg-secondary/80 border cursor-pointer px-3"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground bg-secondary hover:bg-secondary/80 border cursor-pointer"
             >
+              <div
+                className="aria-expanded:border flex aspect-square size-8 items-center justify-center rounded-lg"
+                aria-expanded={state === 'expanded'}
+              >
+                {initials(activeOrg?.name)}
+              </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{activeOrg?.name}</span>
                 <span className="truncate text-xs text-muted-foreground">
@@ -74,6 +82,9 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
                 className="group gap-2 p-2 cursor-pointer aria-selected:pointer-events-none"
                 aria-selected={org.id === activeOrg.id}
               >
+                <div className="flex size-8 items-center justify-center rounded-lg border">
+                  {initials(org?.name)}
+                </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{org?.name}</span>
                   <span className="truncate text-xs text-muted-foreground">
@@ -97,6 +108,7 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
+      <SidebarRail />
     </SidebarMenu>
   )
 }