feat: implement custom sidebar trigger

src/components/app-sidebar-trigger.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { useSidebar } from '@/components/ui/sidebar'
+
+export const AppSidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, size = 'icon', children, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      size={size}
+      onClick={toggleSidebar}
+      className={cn('h-7 w-7', className)}
+      {...props}
+    >
+      {children}
+      <span className='sr-only'>Toggle Sidebar</span>
+    </Button>
+  )
+})
+AppSidebarTrigger.displayName = 'AppSidebarTrigger'

src/components/layout/app-sidebar.tsx

@@ -27,11 +27,11 @@ import {
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
-  SidebarTrigger,
 } from '@/components/ui/sidebar'
 import { NavGroup } from '@/components/layout/nav-group'
 import { NavUser } from '@/components/layout/nav-user'
 import { TeamSwitcher } from '@/components/layout/team-switcher'
+import { AppSidebarTrigger } from '../app-sidebar-trigger'
 import { type SidebarData } from './types'
 
 // SideNav data
@@ -213,9 +213,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </SidebarFooter>
         <SidebarRail />
       </Sidebar>
-      <SidebarTrigger className='absolute top-1/2 -right-4 z-50 rounded-full hidden md:inline-flex'>
+      <AppSidebarTrigger className='absolute top-1/2 -right-4 z-50 rounded-full hidden md:inline-flex'>
         <IconSwitchHorizontal />
-      </SidebarTrigger>
+      </AppSidebarTrigger>
     </div>
   )
 }

src/components/ui/sidebar.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { VariantProps, cva } from 'class-variance-authority'
+import { PanelLeft } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-} from '@/components/ui/sheet'
+import { Sheet, SheetContent } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 import {
   Tooltip,
@@ -196,7 +192,6 @@ const Sidebar = React.forwardRef<
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetTitle className='sr-only'>Sidebar</SheetTitle>
           <SheetContent
             data-sidebar='sidebar'
             data-mobile='true'
@@ -208,9 +203,6 @@ const Sidebar = React.forwardRef<
             }
             side={side}
           >
-            <SheetDescription className='sr-only'>
-              Sidebar Content
-            </SheetDescription>
             <div className='flex h-full w-full flex-col'>{children}</div>
           </SheetContent>
         </Sheet>
@@ -267,14 +259,14 @@ Sidebar.displayName = 'Sidebar'
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
->(({ className, onClick, children, ...props }, ref) => {
+>(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
 
   return (
     <Button
       ref={ref}
       data-sidebar='trigger'
-      variant='outline'
+      variant='ghost'
       size='icon'
       className={cn('h-7 w-7', className)}
       onClick={(event) => {
@@ -283,7 +275,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      {children}
+      <PanelLeft />
       <span className='sr-only'>Toggle Sidebar</span>
     </Button>
   )