Capstone/ui/templates/nav.templ

package templates

templ navTitle(title string) {
	<a
 		class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
 		href="/"
	>
		{ title }
	</a>
	<button
 		class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
 		type="button"
 		onclick="toggleNavbar(&#39;example-collapse-navbar&#39;)"
	>
		<i class="text-white fas fa-bars"></i>
	</button>
}

templ navItem(name string, link string) {
	<li class="flex items-center">
		<a
 			class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
 			href="{ link }"
		>
			{ name }
		</a>
	</li>
}

templ navActionItem(auth bool) {
	<li class="flex items-center">
		if auth {
			<a href="/dashboard"></a>
			<button
 				class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
 				type="button"
 				style="transition: all 0.15s ease 0s;"
			>
				Dashboard
			</button>
		} else {
			<a href="/login">
				<button
 					class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
 					type="button"
 					style="transition: all 0.15s ease 0s;"
				>
					Log in
				</button>
			</a>
		}
	</li>
}

templ Nav(auth bool) {
	<nav class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 ">
		<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
			<div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
				@navTitle("Capstone")
			</div>
			<div
 				class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden"
 				id="example-collapse-navbar"
			>
				<ul class="flex flex-col lg:flex-row list-none mr-auto">
					@navItem("About Us", "/about-us")
					@navItem("Pricing", "/pricing")
				</ul>
				<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
					@navActionItem(auth)
				</ul>
			</div>
		</div>
	</nav>
}