Potion/internal/templates/components/navbar.templ

package components

import "strings"
import "github.com/haydenhargreaves/Potion/internal/domain/server"

templ navLink(current, name, url string) {
	<a
		href={ templ.SafeURL(url) }
		if strings.ToLower(current)==strings.ToLower(name) {
			class="text-gray-700 border-b-2 border-blue-500 px-1 cursor-pointer"
		} else {
			class="text-gray-700 border-b-2 hover:border-blue-400 px-1 cursor-pointer border-white duration-150"
		}
	>
		{ name }
	</a>
}

templ dropdownLink(name, url string) {
	<a class="py-2" href={ templ.SafeURL(url) }>
		{ name }
	</a>
}

templ listIcon(current, name, url string) {
	<a href={ templ.SafeURL(url) }>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 576 512"
			if strings.ToLower(current)==strings.ToLower(name) {
				class="h-4 text-blue-500"
			} else {
				class="h-4 text-gray-700 hover:text-blue-400 duration-150"
			}
		>
			<path
				fill="currentColor"
				d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
			></path>
		</svg>
	</a>
}

templ Navbar(current string) {
	<nav class="block md:fixed w-full z-10">
		<div
			class="relative w-full px-8 md:px-44 p-4 border-b border-gray-300 shadow-sm shadow-gray-300 bg-white flex justify-between items-center"
		>
			<div>
				<a href={ domain.WEB_HOME }>
					<p class="select-none">Potion</p>
				</a>
			</div>
			<div class="hidden md:flex lg:flex items-center gap-8 select-none">
				@navLink(current, "Home", domain.WEB_HOME)
				@navLink(current, "Favorites", domain.WEB_FAVORITES)
				@navLink(current, "Create", domain.WEB_CREATE)
				@navLink(current, "Profile", domain.WEB_PROFIlE)
				@listIcon(current, "List", domain.WEB_LIST)
			</div>
			<div class="md:hidden grid place-content-center">
				<button onclick="toggleMenu()" class="p-2">
					// carot
					<svg
						id="mobile-menu-button-carot"
						class="hidden size-5"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 320 512"
					>
						<path
							d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
						></path>
					</svg>
					// bars
					<svg id="mobile-menu-button-bars" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
						<path
							fill="currentColor"
							d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
						></path>
					</svg>
				</button>
			</div>
			@hamburgerMenu()
		</div>
	</nav>
}

templ hamburgerMenu() {
	<script>
  function toggleMenu() {
    const menu = document.getElementById("mobile-menu-content");
    const carotButton = document.getElementById("mobile-menu-button-carot");
    const barsButton = document.getElementById("mobile-menu-button-bars");

    if (menu.classList.contains("flex")) {
      menu.classList.remove("flex");
      menu.classList.add("hidden");

      carotButton.classList.add("hidden");
      barsButton.classList.remove("hidden");
    } else {
      menu.classList.add("flex");
      menu.classList.remove("hidden");

      carotButton.classList.remove("hidden");
      barsButton.classList.add("hidden");
    }
  }
</script>
	<div
		id="mobile-menu-content"
		class="hidden w-full flex-col items-center absolute top-[100%] left-0 py-2 bg-white border-b border-gray-300 shadow-sm shadow-gray-300 z-20"
	>
		@dropdownLink("Home", domain.WEB_HOME)
		@dropdownLink("Favorites", domain.WEB_FAVORITES)
		@dropdownLink("Create", domain.WEB_CREATE)
		@dropdownLink("Profile", domain.WEB_PROFIlE)
		@dropdownLink("Shopping List", domain.WEB_LIST)
	</div>
}