89 lines
3.0 KiB
Plaintext
89 lines
3.0 KiB
Plaintext
---
|
|
import { metaData } from "../config";
|
|
import { Icon } from "astro-icon/components";
|
|
import ExitToApp from '@mui/icons-material/ExitToApp';
|
|
|
|
const navItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Radio", href: "/radio" },
|
|
{ label: "Memes", href: "/memes" },
|
|
{ blockSeparator: true },
|
|
{ label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
|
|
{ label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
|
|
];
|
|
|
|
const currentPath = Astro.url.pathname;
|
|
---
|
|
<script is:inline>
|
|
toggleTheme = () => {
|
|
console.log("Toggle!")
|
|
const currentTheme = document.documentElement.getAttribute("data-theme");
|
|
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
|
document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
|
|
}
|
|
</script>
|
|
<nav class="w-full px-4 py-4 bg-transparent">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<a href="/" class="text-xl font-semibold header-text whitespace-nowrap">
|
|
{metaData.title}
|
|
</a>
|
|
|
|
<ul class="flex flex-wrap items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
|
|
{navItems.map((item, index) => {
|
|
if (item.blockSeparator) {
|
|
return (
|
|
<li class="text-neutral-500 dark:text-neutral-500 px-2 select-none" aria-hidden="true">
|
|
‖
|
|
</li>
|
|
);
|
|
}
|
|
|
|
const isExternal = item.href?.startsWith("http");
|
|
const normalize = (url) => url?.replace(/\/+$/, '') || '/';
|
|
const isActive = !isExternal && normalize(item.href) === normalize(currentPath);
|
|
|
|
const nextItem = navItems[index + 1];
|
|
const shouldShowThinBar = nextItem && !nextItem.blockSeparator;
|
|
|
|
return (
|
|
<>
|
|
<li>
|
|
<a
|
|
href={item.href}
|
|
class={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors
|
|
hover:bg-neutral-200 dark:hover:bg-neutral-800
|
|
${isActive ? "font-semibold underline underline-offset-4" : ""}`}
|
|
target={isExternal ? "_blank" : undefined}
|
|
rel={isExternal ? "noopener noreferrer" : undefined}
|
|
>
|
|
{item.label}
|
|
{item.icon === ExitToApp && <ExitToApp className="w-4 h-4" client:load />}
|
|
</a>
|
|
</li>
|
|
{shouldShowThinBar && (
|
|
<li class="text-neutral-400 dark:text-neutral-600 select-none" aria-hidden="true">
|
|
|
|
|
</li>
|
|
|
|
)}
|
|
</>
|
|
);
|
|
})}
|
|
<li>
|
|
<button
|
|
id="theme-toggle"
|
|
aria-label="Toggle theme"
|
|
type="button"
|
|
class="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-opacity"
|
|
onclick="toggleTheme()"
|
|
>
|
|
<Icon
|
|
name="fa6-solid:circle-half-stroke"
|
|
class="h-4 w-4 text-[#1c1c1c] dark:text-[#D4D4D4]"
|
|
/>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|