deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): update header

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-04-06 08:11:12 +02:00
parent 7794b3f904
commit 10b42cd2ff
1 changed files with 62 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/layout/Header.astro
View File

@ -10,17 +10,24 @@ const navLinks = [
{ href: '/blog/', label: 'Blog' }, { href: '/blog/', label: 'Blog' },
{ href: '/recipes/', label: 'Recipes' }, { href: '/recipes/', label: 'Recipes' },
]; ];
---
<script is:inline> const getThemePreference = () => {
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme'); return localStorage.getItem('theme');
} }
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}; };
const setTheme = (document: Document) => {
const theme = getThemePreference();
document.documentElement.setAttribute('data-theme', theme ?? '');
document.documentElement.classList.toggle('dark', theme === 'dark');
};
---
<script define:vars={{ setTheme }} is:inline>
const isDark = getThemePreference() === 'dark'; const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark'); document.documentElement.classList.toggle('dark', isDark);
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
@ -30,18 +37,6 @@ const navLinks = [
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
} }
function setTheme(document) {
const theme =
localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
setTheme(document); setTheme(document);
document.addEventListener('astro:before-swap', (ev) => { document.addEventListener('astro:before-swap', (ev) => {
@ -54,7 +49,7 @@ const navLinks = [
open: false, open: false,
windowWidth: window.innerWidth, windowWidth: window.innerWidth,
init() { init() {
this.$watch('windowWidth', value => { this.$watch('windowWidth', () => {
this.open = false; this.open = false;
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
@ -63,7 +58,7 @@ const navLinks = [
}); });
}); });
} }
}`} }`}
x-init="init()" x-init="init()"
class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4"> class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100"> <div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
@ -80,9 +75,8 @@ const navLinks = [
Astro Deploy Astro Deploy
</div> </div>
</a> </a>
<div class="hidden sm:block">
<nav <nav
class="mb-6 mt-4 flex min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex-row sm:p-1"> class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex sm:flex-row sm:p-1">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<HeaderLink <HeaderLink
@ -93,7 +87,6 @@ const navLinks = [
)) ))
} }
</nav> </nav>
</div>
<div class="flex"> <div class="flex">
<button <button
class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden" class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
@ -110,7 +103,7 @@ const navLinks = [
<span <span
aria-hidden="true" aria-hidden="true"
class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out" class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
:class="{'opacity-0': open } "> :class="{'opacity-0': open }">
</span> </span>
<span <span
aria-hidden="true" aria-hidden="true"
@ -122,7 +115,6 @@ const navLinks = [
<ModeToggle client:load /> <ModeToggle client:load />
</div> </div>
</div> </div>
<div class="block w-full basis-full overflow-hidden sm:hidden">
<nav <nav
id="menu" id="menu"
:class="{'flex': open, 'hidden': !open}" :class="{'flex': open, 'hidden': !open}"
@ -133,7 +125,7 @@ const navLinks = [
x-transition:leave="transition ease-in duration-200" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90" x-transition:leave-end="opacity-0 transform scale-90"
class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:block sm:flex-row sm:p-1"> class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:hidden sm:flex-row sm:p-1">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<HeaderLink <HeaderLink
@ -144,5 +136,4 @@ const navLinks = [
)) ))
} }
</nav> </nav>
</div>
</header> </header>