Coldsmile_7
88 lines
3.8 KiB
Plaintext
88 lines
3.8 KiB
Plaintext
---
|
|
import Logo from "@/components/Logo.astro";
|
|
import { siteConfig } from "@/config";
|
|
|
|
const pathname = Astro.url.pathname;
|
|
const links = [
|
|
{ href: "/downloads", label: "下载" },
|
|
{ href: "/guide", label: "快速开始" },
|
|
{ href: "/about", label: "项目介绍" },
|
|
];
|
|
---
|
|
|
|
<nav id="nav-wrapper" class="bg-background-light-10 dark:bg-background-dark-90 fixed inset-x-0 top-0 z-50 transition-shadow">
|
|
<div class="mx-auto flex max-w-7xl flex-row items-center gap-2 px-4 py-2">
|
|
<button
|
|
id="nav-toggle"
|
|
title="切换导航"
|
|
class="btn btn-outline btn-gray mr-2 inline-flex items-center justify-center rounded-sm p-2 leading-none md:hidden"
|
|
aria-label="切换导航"
|
|
>
|
|
<svg class="size-6 fill-none stroke-gray-500" viewBox="0 0 24 24" aria-hidden="true"
|
|
><path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round"></path></svg
|
|
>
|
|
</button>
|
|
|
|
<a href="/" class="leading-none text-gray-950 dark:text-white" aria-label="Uranium 首页"><Logo size={48} /></a>
|
|
|
|
<div
|
|
id="nav-menu"
|
|
class="bg-background-light-10 dark:bg-background-dark-90 absolute inset-x-0 top-full flex w-full flex-col gap-4 p-4 shadow-lg max-md:hidden! md:relative md:flex md:w-auto md:flex-row md:items-center md:gap-0 md:bg-transparent md:p-0 md:shadow-none"
|
|
>
|
|
{
|
|
links.map((link) => (
|
|
<a
|
|
href={link.href}
|
|
class:list={[
|
|
"rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:bg-gray-200/60 dark:hover:bg-gray-800",
|
|
pathname.startsWith(link.href) ? "text-green-600 dark:text-green-400" : "text-gray-950 dark:text-white",
|
|
]}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<div class="grow"></div>
|
|
|
|
<button
|
|
id="theme-toggle"
|
|
class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
|
|
title="切换主题"
|
|
aria-label="切换主题"
|
|
>
|
|
<svg class="size-6 fill-none stroke-current" viewBox="0 0 24 24" aria-hidden="true"
|
|
><circle cx="12" cy="12" r="4"></circle><path
|
|
d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41"
|
|
></path></svg
|
|
>
|
|
</button>
|
|
<a
|
|
class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
|
|
href={siteConfig.repository}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
title="GitHub"
|
|
aria-label="GitHub"
|
|
>
|
|
<svg class="size-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"
|
|
><path
|
|
d="M12 .7a11.5 11.5 0 0 0-3.64 22.4c.58.1.79-.25.79-.56v-2.24c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.28-5.27-5.68 0-1.26.45-2.28 1.19-3.08-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.16 1.18a10.9 10.9 0 0 1 5.76 0c2.19-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.75.11 3.04.74.8 1.19 1.82 1.19 3.08 0 4.41-2.71 5.38-5.29 5.67.42.36.79 1.06.79 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z"
|
|
></path></svg
|
|
>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
document
|
|
.getElementById("nav-toggle")
|
|
?.addEventListener("click", () => document.getElementById("nav-menu")?.classList.toggle("max-md:hidden!"));
|
|
window.addEventListener("scroll", () => document.getElementById("nav-wrapper")?.classList.toggle("shadow-lg", window.scrollY > 1));
|
|
document.getElementById("theme-toggle")?.addEventListener("click", () => {
|
|
const dark = document.documentElement.classList.toggle("dark");
|
|
localStorage.setItem("uranium-theme", dark ? "dark" : "light");
|
|
});
|
|
</script>
|