Made navbar responsive

view/component/navbar.templ

@@ -1,5 +1,90 @@
 package component
 
-templ Navbar() {
-	<nav>Test</nav>
+type NavItem struct {
+	name string
+	href string
+}
+
+func getNavItems() []NavItem {
+	return []NavItem{
+		{
+			name: "Movies",
+			href: "/movies",
+		},
+	}
+}
+
+templ Navbar() {
+	<div x-data="{ open: false }">
+		<header class="bg-crust">
+			<div
+				class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
+                px-4 sm:px-6 lg:px-8"
+			>
+				<a class="block" href="#">
+					<span class="text-3xl font-bold transition hover:text-green">
+						<span class="hidden sm:inline">Project</span> Reshoot
+					</span>
+					<!-- logo here -->
+				</a>
+				<div class="flex flex-1 items-center justify-end sm:justify-between">
+					<nav aria-label="Global" class="hidden sm:block">
+						<ul class="flex items-center gap-6 text-xl">
+							for _, item := range getNavItems() {
+								<li>
+									<a
+										class="text-subtext1 hover:text-green
+                                        transition"
+										href={ templ.SafeURL(item.href) }
+									>
+										{ item.name }
+									</a>
+								</li>
+							}
+						</ul>
+					</nav>
+					<div class="flex items-center gap-2">
+						<div class="sm:flex sm:gap-2">
+							<a
+								class="hidden rounded-lg px-4 py-2 sm:block 
+                                bg-green hover:bg-green/75 text-mantle transition"
+								href="/login"
+							>
+								Login
+							</a>
+							<a
+								class="hidden rounded-lg px-4 py-2 sm:block
+                                bg-blue text-mantle hover:bg-blue/75 transition"
+								href="/register"
+							>
+								Register
+							</a>
+						</div>
+						<button
+							@click="open = !open"
+							class="block rounded-lg p-2.5 sm:hidden transition
+                            bg-surface0 text-subtext0 hover:text-overlay2/75"
+						>
+							<span class="sr-only">Toggle menu</span>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="size-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M4 6h16M4 12h16M4 18h16"
+								></path>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</div>
+		</header>
+		@sideNav(getNavItems())
+	</div>
 }