navbar changes, radio/webplayer rewrite + additional stations
This commit is contained in:
@@ -2,79 +2,84 @@
|
||||
import { metaData } from "../config";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import ExitToApp from '@mui/icons-material/ExitToApp';
|
||||
import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
|
||||
|
||||
const navItems = {
|
||||
"/": { name: "Home", className: "", icon: null },
|
||||
"divider-1": { name: "", className: "", icon: HorizontalRuleIcon },
|
||||
"/radio": { name: "Radio", className: "", icon: null },
|
||||
"divider-2": { name: "", className: "", icon: HorizontalRuleIcon },
|
||||
"https://status.boatson.boats": { name: "Status", className: "", icon: ExitToApp },
|
||||
"divider-3": { name: "", className: "", icon: HorizontalRuleIcon },
|
||||
"https://kode.boatson.boats": { name: "Git", className: "", icon: ExitToApp },
|
||||
"divider-4": { name: "", className: "", icon: HorizontalRuleIcon },
|
||||
"https://old.codey.lol": { name: "Old Site", className: "", icon: ExitToApp },
|
||||
};
|
||||
const navItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Radio", href: "/radio" },
|
||||
{ blockSeparator: true },
|
||||
{ label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
|
||||
{ label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
|
||||
{ label: "Old Site", href: "https://old.codey.lol", icon: ExitToApp },
|
||||
];
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<nav class="lg:mb-16 mb-12 py-5">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="text-3xl font-semibold header-text">
|
||||
{metaData.title}
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4 mt-6 md:mt-0 md:ml-auto items-center">
|
||||
{
|
||||
Object.entries(navItems).map(([path, { name, className, icon }]) =>
|
||||
{
|
||||
let isVisualSeparator = icon === HorizontalRuleIcon
|
||||
|
||||
if (isVisualSeparator) {
|
||||
return (
|
||||
<HorizontalRuleIcon client:load
|
||||
size="sm"
|
||||
className="hr"
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
}} />
|
||||
)
|
||||
}
|
||||
return (
|
||||
<a
|
||||
href={path}
|
||||
class={`transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative`}>
|
||||
{name}
|
||||
</a>
|
||||
)})
|
||||
}
|
||||
<button
|
||||
id="theme-toggle"
|
||||
aria-label="Toggle theme"
|
||||
class="flex items-center justify-center transition-opacity duration-300 hover:opacity-90">
|
||||
<Icon
|
||||
name="fa6-solid:circle-half-stroke"
|
||||
class="h-[14px] w-[14px] text-[#1c1c1c] dark:text-[#D4D4D4]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script is:inline>
|
||||
function setTheme(theme) {
|
||||
document.dispatchEvent(new CustomEvent("set-theme", { detail: theme }));
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
toggleTheme = () => {
|
||||
console.log("Toggle!")
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
document
|
||||
.getElementById("theme-toggle")
|
||||
.addEventListener("click", toggleTheme);
|
||||
});
|
||||
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 isActive = item.href === 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 hidden sm:inline 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>
|
||||
|
||||
Reference in New Issue
Block a user