Made navbar responsive
This commit is contained in:
@@ -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>
|
||||
}
|
||||
|
||||
47
view/component/sidenav.templ
Normal file
47
view/component/sidenav.templ
Normal file
@@ -0,0 +1,47 @@
|
||||
package component
|
||||
|
||||
templ sideNav(navItems []NavItem) {
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition
|
||||
class="absolute w-full bg-mantle sm:hidden"
|
||||
>
|
||||
<div class="px-4 py-6">
|
||||
<ul class="space-y-1">
|
||||
for _, item := range navItems {
|
||||
<li>
|
||||
<a
|
||||
href={ templ.SafeURL(item.href) }
|
||||
class="block rounded-lg px-4 py-2 text-lg
|
||||
bg-surface0 text-text transition hover:bg-surface2"
|
||||
>
|
||||
{ item.name }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="px-4 pb-6">
|
||||
<ul class="space-y-1">
|
||||
<li class="flex justify-center items-center gap-2">
|
||||
<a
|
||||
class="w-26 px-4 py-2 rounded-lg
|
||||
bg-green text-mantle transition hover:bg-green/75
|
||||
text-center"
|
||||
href="/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
class="w-26 px-4 py-2 rounded-lg
|
||||
bg-blue text-mantle transition hover:bg-blue/75
|
||||
text-center"
|
||||
href="/register"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -11,33 +11,29 @@ templ Global() {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Project Reshoot</title>
|
||||
<link href="/static/css/output.css" rel="stylesheet" />
|
||||
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/core.iife.js" type="module"></script>
|
||||
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/icon.iife.js" type="module"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"
|
||||
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/alpinejs" defer></script>
|
||||
<script>
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
if (
|
||||
localStorage.getItem("mode") === "dark" ||
|
||||
(!("mode" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
htmlElement.classList.add("dark");
|
||||
} else {
|
||||
htmlElement.classList.remove("dark");
|
||||
}
|
||||
|
||||
htmlElement.classList.add(
|
||||
localStorage.getItem("theme") || "uk-theme-catppuccin",
|
||||
document.documentElement.classList.toggle(
|
||||
"dark",
|
||||
localStorage.currentTheme === "dark" ||
|
||||
(
|
||||
!("theme" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
),
|
||||
);
|
||||
|
||||
//localStorage.currentTheme = "light";
|
||||
//localStorage.currentTheme = "dark";
|
||||
//localStorage.removeItem("theme");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-background text-foreground">
|
||||
<body class="bg-base text-text ubuntu-mono-regular">
|
||||
@component.Navbar()
|
||||
<h1 class="text-3xl text-foreground font-bold underline">Hello world! </h1>
|
||||
<h1 class="text-3xl font-bold underline">Hello world! </h1>
|
||||
{ children... }
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user