sharenet/frontend/src/components/mobile-nav.tsx

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>
</>
);
}