83 lines
2.6 KiB
React
83 lines
2.6 KiB
React
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
|
||
|
|
import { useState } from 'react'
|
||
|
|
|
||
|
|
const MobileNav = () => {
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
|
||
|
|
const navLinks = [
|
||
|
|
{ name: 'Home', href: '/' },
|
||
|
|
{ name: 'Services', href: '/services' },
|
||
|
|
{ name: 'Industries', href: '/industries' },
|
||
|
|
{ name: '8x8', href: '/8x8' },
|
||
|
|
{ name: 'About', href: '/about' },
|
||
|
|
{ name: 'Contact', href: '/contact' },
|
||
|
|
{ name: 'Support', href: '/support' },
|
||
|
|
]
|
||
|
|
|
||
|
|
const closeMobileMenu = () => {
|
||
|
|
setIsOpen(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="md:hidden">
|
||
|
|
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||
|
|
<SheetTrigger asChild>
|
||
|
|
<button className="p-2 text-text hover:text-primary-navy focus:outline-none">
|
||
|
|
<svg
|
||
|
|
className="h-6 w-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2"
|
||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<span className="sr-only">Open menu</span>
|
||
|
|
</button>
|
||
|
|
</SheetTrigger>
|
||
|
|
<SheetContent side="right" className="w-[280px] sm:w-[320px]">
|
||
|
|
<div className="flex flex-col h-full">
|
||
|
|
<div className="flex items-center gap-2 mb-6">
|
||
|
|
<img
|
||
|
|
src="/logo.svg"
|
||
|
|
alt="Queue North"
|
||
|
|
className="h-8 w-auto"
|
||
|
|
/>
|
||
|
|
<span className="font-bold text-xl text-primary-navy">Queue North</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="flex flex-col space-y-4">
|
||
|
|
{navLinks.map((link) => (
|
||
|
|
<a
|
||
|
|
key={link.name}
|
||
|
|
href={link.href}
|
||
|
|
onClick={closeMobileMenu}
|
||
|
|
className="text-base font-medium text-text hover:text-primary-navy py-2 border-b border-gray-100 last:border-0"
|
||
|
|
>
|
||
|
|
{link.name}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-6">
|
||
|
|
<a
|
||
|
|
href="/contact"
|
||
|
|
onClick={closeMobileMenu}
|
||
|
|
className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors"
|
||
|
|
>
|
||
|
|
Request Consultation
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SheetContent>
|
||
|
|
</Sheet>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileNav
|