72 lines
No EOL
2 KiB
TypeScript
72 lines
No EOL
2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export function MobileNav() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center sm:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="p-2"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="Toggle navigation menu"
|
|
>
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
{isOpen ? (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
) : (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
)}
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={`sm:hidden ${isOpen ? 'block' : 'hidden'}`}>
|
|
<div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t">
|
|
<Link
|
|
href="/"
|
|
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
href="/users"
|
|
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Users
|
|
</Link>
|
|
<Link
|
|
href="/products"
|
|
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Products
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|