67 lines
2.9 KiB
TypeScript
67 lines
2.9 KiB
TypeScript
|
import Link from 'next/link'
|
||
|
|
import Logo from './logo'
|
||
|
|
import Dropdown from '@/components/utils/dropdown'
|
||
|
|
import MobileMenu from './mobile-menu'
|
||
|
|
|
||
|
|
export default function Header({ mode = 'dark' }: {
|
||
|
|
mode?: string
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<header className={`absolute w-full z-30 ${mode !== 'light' && 'dark'}`}>
|
||
|
|
<div className="max-w-6xl mx-auto px-5 sm:px-6">
|
||
|
|
<div className="flex items-center justify-between h-16 md:h-20">
|
||
|
|
|
||
|
|
{/* Site branding */}
|
||
|
|
<div className="shrink-0 mr-4">
|
||
|
|
<Logo />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Desktop navigation */}
|
||
|
|
<nav className="hidden md:flex md:grow">
|
||
|
|
|
||
|
|
{/* Desktop menu links */}
|
||
|
|
<ul className="flex grow justify-end flex-wrap items-center">
|
||
|
|
<li>
|
||
|
|
<Link href="/about" className="font-medium text-slate-800 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600 px-3 lg:px-5 py-2 flex items-center transition duration-150 ease-in-out">About</Link>
|
||
|
|
</li>
|
||
|
|
{/* 1st level: hover */}
|
||
|
|
<Dropdown title="Residential">
|
||
|
|
{/* 2nd level: hover */}
|
||
|
|
<li>
|
||
|
|
<Link href="/pc-building-and-repair" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">PC Building & Repair</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="/home-automation" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">Home Automation</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="/home-networking" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">Home Networking</Link>
|
||
|
|
</li>
|
||
|
|
</Dropdown>
|
||
|
|
{/* 1st level: hover */}
|
||
|
|
<Dropdown title="Commercial">
|
||
|
|
{/* 2nd level: hover */}
|
||
|
|
<li>
|
||
|
|
<Link href="/pc-server-maintenance" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">PC & Server Maintenance</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="/remote-management" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">Remote Management</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="/web-presence" className="font-medium text-sm text-gray-600 hover:text-gray-900 flex py-2 px-5 leading-tight">Web Presence</Link>
|
||
|
|
</li>
|
||
|
|
</Dropdown>
|
||
|
|
<li>
|
||
|
|
<Link href="/contact-us" className="font-medium text-slate-800 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600 px-3 lg:px-5 py-2 flex items-center transition duration-150 ease-in-out">Contact Us</Link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<MobileMenu />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
)
|
||
|
|
}
|