fix: make sidebar scrollable when overflow

src/components/nav.tsx

@@ -46,14 +46,16 @@ export default function Nav({ links, isCollapsed, className }: NavProps) {
     <div
       data-collapsed={isCollapsed}
       className={cn(
-        'group flex flex-col gap-4 overflow-hidden border-b  py-2 transition-[max-height,padding] duration-500 data-[collapsed=true]:py-2 md:border-none',
+        'group overflow-hidden border-b  py-2 transition-[max-height,padding] duration-500 data-[collapsed=true]:py-2 md:border-none',
         className
       )}
     >
       <TooltipProvider delayDuration={0}>
-        <nav className='grid gap-1 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2'>
-          {links.map(renderLink)}
-        </nav>
+        <div className='h-auto overflow-auto md:h-svh'>
+          <nav className='grid gap-1 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2'>
+            {links.map(renderLink)}
+          </nav>
+        </div>
       </TooltipProvider>
     </div>
   )

src/components/sidebar.tsx

@@ -1,6 +1,5 @@
 import Nav from './nav'
 import { cn } from '@/lib/utils'
-import { Separator } from './ui/separator'
 import { Button } from './ui/button'
 import { sidelinks } from '@/data/sidelinks'
 import { IconChevronsLeft, IconMenu2, IconX } from '@tabler/icons-react'
@@ -24,69 +23,70 @@ export default function Sidebar({
         className
       )}
     >
-      <div
-        className={`flex h-16 w-full items-center justify-between gap-2 px-4 py-2`}
-      >
-        <div className='flex items-center gap-2'>
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 256 256'
-            className={`transition-all ${isCollapsed ? 'h-6 w-6' : 'h-8 w-8'}`}
-          >
-            <rect width='256' height='256' fill='none'></rect>
-            <line
-              x1='208'
-              y1='128'
-              x2='128'
-              y2='208'
-              fill='none'
-              stroke='currentColor'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              strokeWidth='16'
-            ></line>
-            <line
-              x1='192'
-              y1='40'
-              x2='40'
-              y2='192'
-              fill='none'
-              stroke='currentColor'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              strokeWidth='16'
-            ></line>
-            <span className='sr-only'>Website Name</span>
-          </svg>
-          <div
-            className={`flex flex-col justify-end truncate ${isCollapsed ? 'invisible w-0' : 'visible w-auto'}`}
-          >
-            <span className='font-medium'>Shadcn Dashboard</span>
-            <span className='text-xs'>Vite + ShadcnUI</span>
+      <div className='flex flex-col md:h-svh'>
+        <div
+          className={`flex h-16 w-full items-center justify-between gap-2 border-b px-4 py-2`}
+        >
+          <div className='flex items-center gap-2'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 256 256'
+              className={`transition-all ${isCollapsed ? 'h-6 w-6' : 'h-8 w-8'}`}
+            >
+              <rect width='256' height='256' fill='none'></rect>
+              <line
+                x1='208'
+                y1='128'
+                x2='128'
+                y2='208'
+                fill='none'
+                stroke='currentColor'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth='16'
+              ></line>
+              <line
+                x1='192'
+                y1='40'
+                x2='40'
+                y2='192'
+                fill='none'
+                stroke='currentColor'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth='16'
+              ></line>
+              <span className='sr-only'>Website Name</span>
+            </svg>
+            <div
+              className={`flex flex-col justify-end truncate ${isCollapsed ? 'invisible w-0' : 'visible w-auto'}`}
+            >
+              <span className='font-medium'>Shadcn Dashboard</span>
+              <span className='text-xs'>Vite + ShadcnUI</span>
+            </div>
           </div>
+          <Button
+            variant='ghost'
+            size='icon'
+            className='md:hidden'
+            aria-label='Toggle Navigation'
+            aria-controls='sidebar-menu'
+            aria-expanded={navOpened}
+            onClick={() => setNavOpened((prev) => !prev)}
+          >
+            {navOpened ? <IconX /> : <IconMenu2 />}
+          </Button>
         </div>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='md:hidden'
-          aria-label='Toggle Navigation'
-          aria-controls='sidebar-menu'
-          aria-expanded={navOpened}
-          onClick={() => setNavOpened((prev) => !prev)}
-        >
-          {navOpened ? <IconX /> : <IconMenu2 />}
-        </Button>
-      </div>
 
-      <Separator className='mb-4 hidden md:block' />
-      <Nav
-        id='sidebar-menu'
-        className={
-          navOpened ? 'max-h-screen' : 'max-h-0 py-0 md:max-h-screen md:py-2'
-        }
-        isCollapsed={isCollapsed}
-        links={sidelinks}
-      />
+        <Nav
+          id='sidebar-menu'
+          className={
+            navOpened ? 'max-h-screen' : 'max-h-0 py-0 md:max-h-screen md:py-2'
+          }
+          isCollapsed={isCollapsed}
+          links={sidelinks}
+        />
+      </div>
       <Button
         onClick={() => setIsCollapsed((prev) => !prev)}
         size='icon'

src/index.css

@@ -99,6 +99,9 @@
   * {
     @apply border-border;
   }
+  html {
+    @apply h-svh md:overflow-hidden;
+  }
   body {
     @apply bg-background text-foreground;
   }