feat: add extra AppTitle component for sidebar header (#216)

Author: satnaing

src/components/layout/app-sidebar.tsx

@@ -6,6 +6,7 @@ import {
   SidebarHeader,
   SidebarRail,
 } from '@/components/ui/sidebar'
+// import { AppTitle } from './app-title'
 import { sidebarData } from './data/sidebar-data'
 import { NavGroup } from './nav-group'
 import { NavUser } from './nav-user'
@@ -17,6 +18,10 @@ export function AppSidebar() {
     <Sidebar collapsible={collapsible} variant={variant}>
       <SidebarHeader>
         <TeamSwitcher teams={sidebarData.teams} />
+
+        {/* Replace <TeamSwitch /> with the following <AppTitle />
+         /* if you want to use the normal app title instead of TeamSwitch dropdown */}
+        {/* <AppTitle /> */}
       </SidebarHeader>
       <SidebarContent>
         {sidebarData.navGroups.map((props) => (

src/components/layout/app-title.tsx

@@ -0,0 +1,64 @@
+import { Link } from '@tanstack/react-router'
+import { Menu, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { Button } from '../ui/button'
+
+export function AppTitle() {
+  const { setOpenMobile } = useSidebar()
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size='lg'
+          className='gap-0 py-0 hover:bg-transparent active:bg-transparent'
+          asChild
+        >
+          <div>
+            <Link
+              to='/'
+              onClick={() => setOpenMobile(false)}
+              className='grid flex-1 text-start text-sm leading-tight'
+            >
+              <span className='truncate font-bold'>Shadcn-Admin</span>
+              <span className='truncate text-xs'>Vite + ShadcnUI</span>
+            </Link>
+            <ToggleSidebar />
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+function ToggleSidebar({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar='trigger'
+      data-slot='sidebar-trigger'
+      variant='ghost'
+      size='icon'
+      className={cn('aspect-square size-8 max-md:scale-125', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <X className='md:hidden' />
+      <Menu className='max-md:hidden' />
+      <span className='sr-only'>Toggle Sidebar</span>
+    </Button>
+  )
+}