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

refactor(layout): create header component

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-02-26 13:53:06 +01:00
parent d6ab7840d7
commit b3fe93a564
2 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/layout/Header.astro Normal file
View File

@ -0,0 +1,29 @@
---
import '@/styles/globals.css';
import { ModeToggle } from '@/components/ModeToggle';
---
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
}
</script>
<header class="relative overflow-hidden bg-white dark:bg-gray-900 dark:text-gray-100">
<div class="flex items-center justify-center py-4 dark:text-white">
<ModeToggle client:load />
</div>
</header>

27
src/layouts/BaseLayout.astro
View File

@ -1,29 +1,8 @@
---
import '@/styles/globals.css';
import { ModeToggle } from '@/components/ModeToggle';
import Header from '@/components/layout/Header.astro';
const { title } = Astro.props;
---
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8" />
@ -35,9 +14,7 @@ const { title } = Astro.props;
<title>{title}</title>
</head>
<body class="dark:bg-black">
<div class="flex items-center justify-center pt-4 dark:text-white">
<ModeToggle client:load />
</div>
<Header />
<main>
<slot />
</main>