header.templ

package website

type link struct {
	href string
	text string
}

var headerLinks = []link{
	{href: "/services/", text: "Services"},
	{href: "/work/", text: "Work"},
	{href: "/company/", text: "About us"},
	{href: "/careers/", text: "Careers"},
	{href: "/blog/", text: "Blog"},
	{href: "/contact/", text: "Contact"},
}

templ header(uri string) {
	<header
		class="py-6 px-4 sm:px-8 md:px-12 lg:px-16 xl:px-20 2xl:px-24"
	>
		<nav>
			<div class="mx-auto flex items-center justify-between gap-x-8">
				<a class="flex-none" href="/">
					<span class="sr-only">verifa</span>
					<img
						class="hidden md:block h-10 w-full md:h-12 object-contain object-left"
						src={ verifaLogoSVG }
						alt="verifa-logo"
					/>
					<img
						class="md:hidden h-10 w-auto object-contain object-left"
						src={ verifaLogoShortSVG }
						alt="verifa-logo"
					/>
				</a>
				<!-- Desktop menu -->
				<div class="hidden md:flex md:items-center md:gap-x-10 md:flex-wrap">
					for _, link := range headerLinks {
						<a
							href={ templ.URL(link.href) }
							class={
								"py-2 v-element border-b-2 border-v-white hover:text-v-lilac hover:border-v-lilac focus:outline-none",
								templ.KV("!border-v-black", uri == link.href),
							}
						>
							{ link.text }
						</a>
					}
				</div>
				<div class="-mr-2 flex items-center md:hidden">
					<!-- Mobile menu button -->
					<button
						type="button"
						class="relative inline-flex items-center justify-center rounded-md p-2 hover:bg-v-gray/20 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-v-lilac"
						_="on click toggle .hidden on .mobile-menu"
						aria-controls="mobile-menu"
						aria-expanded="false"
					>
						<span class="absolute -inset-0.5"></span>
						<span class="sr-only">Open main menu</span>
						<!--
							Icon when menu is closed.
							Menu open: "hidden", Menu closed: "block"
						-->
						<div class="mobile-menu">
							<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
							</svg>
						</div>
						<!--
							Icon when menu is open.
							Menu open: "block", Menu closed: "hidden"
						-->
						<div class="hidden mobile-menu">
							<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
							</svg>
						</div>
					</button>
				</div>
			</div>
			<!-- Mobile menu, show/hide based on menu state. -->
			<div class="hidden md:hidden mobile-menu" id="mobile-menu">
				<div class="space-y-3 pb-3 pt-8">
					for _, link := range headerLinks {
						<a
							href={ templ.URL(link.href) }
							class={
								"block border-l-2 border-v-white px-3 v-element hover:text-v-lilac focus:outline-none",
								templ.KV("!border-v-black", uri == link.href),
							}
						>
							{ link.text }
						</a>
					}
				</div>
			</div>
		</nav>
	</header>
}