krasi/hassp.pyc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

190600

Browse Source
This commit is contained in:
krasi
2024-06-19 22:58:55 +03:00
parent fcf89a9cc5
commit 54344f1497
152 changed files with 18665 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/components/Header.astro Normal file
View File

@@ -0,0 +1,184 @@
---
import { NavigationLinks } from '../config'
import NavLink from './ui/NavLink.astro'
import BrandLogo from './logos/BrandLogo.astro'
import Theme from './logos/Theme.astro';
---
<header class="sticky inset-x-0 top-4 z-50 flex w-full flex-wrap text-sm md:flex-nowrap md:justify-start">
<nav
class="relative mx-2 w-full rounded-[36px] border border-neutral-100 bg-neutral-100 px-4 py-3 backdrop-blur-md dark:border-neutral-700/40 dark:bg-neutral-800/80 dark:backdrop-blur-md md:flex md:items-center md:justify-between md:px-6 lg:px-8 xl:mx-auto"
aria-label="Global"
>
<div class="flex items-center justify-between ">
<a
class="h-[42px] flex-none rounded-lg text-xl font-bold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
href="/"
aria-label="Brand"
>
<BrandLogo class="h-full w-auto object-cover rounded-full" />
</a>
<div class="ml-auto md:hidden">
<button
type="button"
class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
data-hs-collapse="#navbar-collapse-with-animation"
aria-controls="navbar-collapse-with-animation"
aria-label="Toggle navigation"
>
<svg
class="h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:hidden"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="3" x2="21" y1="6" y2="6"></line>
<line x1="3" x2="21" y1="12" y2="12"></line>
<line x1="3" x2="21" y1="18" y2="18"></line>
</svg>
<svg
class="hidden h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:block"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<span class="inline-block md:hidden">
<Theme />
</span>
</div>
<div
id="navbar-collapse-with-animation"
class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
>
<div
class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 lg:gap-x-7 md:gap-y-0 md:ps-7"
>
{NavigationLinks.map(link => (
<NavLink url={link.url} name={link.name} />
))}
<span class="hidden md:inline-block">
<Theme />
</span>
</div>
</div>
</nav>
</header>
<script is:inline>
const HSThemeAppearance = {
init() {
const defaultTheme = "default";
let theme = localStorage.getItem("hs_theme") || defaultTheme;
if (document.querySelector("html").classList.contains("dark")) {
return;
}
this.setAppearance(theme);
},
_resetStylesOnLoad() {
const $resetStyles = document.createElement("style");
$resetStyles.innerText = `*{transition: unset !important;}`;
$resetStyles.setAttribute("data-hs-appearance-onload-styles", "");
document.head.appendChild($resetStyles);
return $resetStyles;
},
setAppearance(theme, saveInStore = true, dispatchEvent = true) {
const $resetStylesEl = this._resetStylesOnLoad();
if (saveInStore) {
localStorage.setItem("hs_theme", theme);
}
if (theme === "auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
}
document.querySelector("html").classList.remove("dark");
document.querySelector("html").classList.remove("default");
document.querySelector("html").classList.remove("auto");
document.querySelector("html").classList.add(this.getOriginalAppearance());
setTimeout(() => $resetStylesEl.remove());
if (dispatchEvent) {
window.dispatchEvent(new CustomEvent("on-hs-appearance-change", { detail: theme }));
}
},
getAppearance() {
let theme = this.getOriginalAppearance();
if (theme === "auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
}
return theme;
},
getOriginalAppearance() {
const defaultTheme = "default";
return localStorage.getItem("hs_theme") || defaultTheme;
},
};
HSThemeAppearance.init();
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
if (HSThemeAppearance.getOriginalAppearance() === "auto") {
HSThemeAppearance.setAppearance("auto", false);
}
});
window.addEventListener("load", () => {
const $clickableThemes = document.querySelectorAll(
"[data-hs-theme-click-value]",
);
const $switchableThemes = document.querySelectorAll(
"[data-hs-theme-switch]",
);
$clickableThemes.forEach(($item) => {
$item.addEventListener("click", () =>
HSThemeAppearance.setAppearance(
$item.getAttribute("data-hs-theme-click-value"),
true,
$item,
),
);
});
$switchableThemes.forEach(($item) => {
$item.addEventListener("change", (e) => {
HSThemeAppearance.setAppearance(e.target.checked ? "dark" : "default");
});
$item.checked = HSThemeAppearance.getAppearance() === "dark";
});
window.addEventListener("on-hs-appearance-change", (e) => {
$switchableThemes.forEach(($item) => {
$item.checked = e.detail === "dark";
});
});
});
</script>
<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>