fix: replace nav with dropdown in mobile topnav

src/components/top-nav.tsx

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils'
 import { Link } from 'react-router-dom'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from './ui/button'
+import { IconMenu } from '@tabler/icons-react'
 
 interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
   links: {
@@ -11,19 +19,46 @@ interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
 
 export function TopNav({ className, links, ...props }: TopNavProps) {
   return (
-    <nav
-      className={cn('flex items-center space-x-4 lg:space-x-6', className)}
-      {...props}
-    >
-      {links.map(({ title, href, isActive }) => (
-        <Link
-          key={`${title}-${href}`}
-          to={href}
-          className={`text-sm font-medium transition-colors hover:text-primary ${isActive ? '' : 'text-muted-foreground'}`}
-        >
-          {title}
-        </Link>
-      ))}
-    </nav>
+    <>
+      <div className='md:hidden'>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size='icon' variant='outline'>
+              <IconMenu />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side='bottom' align='start'>
+            {links.map(({ title, href, isActive }) => (
+              <DropdownMenuItem key={`${title}-${href}`} asChild>
+                <Link
+                  to={href}
+                  className={!isActive ? 'text-muted-foreground' : ''}
+                >
+                  {title}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <nav
+        className={cn(
+          'hidden items-center space-x-4 md:flex lg:space-x-6',
+          className
+        )}
+        {...props}
+      >
+        {links.map(({ title, href, isActive }) => (
+          <Link
+            key={`${title}-${href}`}
+            to={href}
+            className={`text-sm font-medium transition-colors hover:text-primary ${isActive ? '' : 'text-muted-foreground'}`}
+          >
+            {title}
+          </Link>
+        ))}
+      </nav>
+    </>
   )
 }