package components

templ NavBar(hero templ.Component, navItems []NavItem) {
	<nav
		class={ "w-100",
    "bg-uigrey-600",
    "shadow",
    "shadow-uigrey-700",
    "rounded",
    "rounded-full",
    "md:px-auto" }
	>
		<div
			class={ "md:h-16",
      "h-28",
      "mx-auto",
      "md:px-4",
      "container",
      "flex",
      "items-center",
      "justify-between",
      "flex-wrap",
      "md:flex-nowrap" }
		>
			<a href="/">
				@hero
			</a>
			<div class={ "text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3" }>
				<ul class={ "flex", "justify-between", "sm:w-full", "md:w-auto" }>
					for _, ni := range navItems {
						<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }>
							<a href={ templ.URL(ni.Href) }>{ ni.Name }</a>
						</li>
					}
				</ul>
			</div>
			<div class={ "order-2", "md:order-3" }>Login</div>
		</div>
	</nav>
}