cf0e291dd9
This file contains route constants so they can be changed dynamically. However, they do not support changes to the router, those are still manual.
98 lines
4.0 KiB
Plaintext
98 lines
4.0 KiB
Plaintext
package components
|
|
|
|
import "strings"
|
|
import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
|
|
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>
|
|
}
|
|
|
|
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>
|
|
<p class="select-none">Potion</p>
|
|
</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>
|
|
}
|