|
| 1 | +--- |
| 2 | +import NavbarLink from './NavbarLink.astro' |
| 3 | +import { Icon } from 'astro-icon/components' |
| 4 | +import ThemeSelector from './ThemeSelector.astro' |
| 5 | +import { SITE_BASE, WebsiteLinks } from '../consts' |
| 6 | +import LogoSVG from '../assets/logo.svg' |
| 7 | +--- |
| 8 | + |
| 9 | +<header class="fixed top-0 w-full z-40 bg-background dark:bg-background-dark"> |
| 10 | + <nav class=""> |
| 11 | + <div class="app-container flex justify-between items-center py-5"> |
| 12 | + <a href={`${SITE_BASE}/`} aria-label="Home"> |
| 13 | + <LogoSVG height={36} width={36} /> |
| 14 | + </a> |
| 15 | + <div class="gap-8 hidden md:flex items-center"> |
| 16 | + { |
| 17 | + WebsiteLinks.map((link) => ( |
| 18 | + <NavbarLink |
| 19 | + class="text-lg" |
| 20 | + href={`${SITE_BASE}/${link.url}`} |
| 21 | + target={link.url.charAt(0) === 'h' ? '_blank' : '_self'} |
| 22 | + > |
| 23 | + {link.name} |
| 24 | + </NavbarLink> |
| 25 | + )) |
| 26 | + } |
| 27 | + <ThemeSelector /> |
| 28 | + </div> |
| 29 | + <button |
| 30 | + class="md:hidden cursor-pointer" |
| 31 | + id="nav-open-btn" |
| 32 | + aria-label="Open navigation menu" |
| 33 | + title="Open navigation menu" |
| 34 | + > |
| 35 | + <Icon aria-hidden name="mdi:menu" size={32} /> |
| 36 | + </button> |
| 37 | + |
| 38 | + <!-- Mobile nav --> |
| 39 | + <div |
| 40 | + class="translate-x-full md:hidden fixed top-0 right-0 bg-background dark:bg-background-dark h-screen w-5/6 px-8 py-6 transition-transform z-40 border-l-[1px] border-background" |
| 41 | + id="mobile-menu" |
| 42 | + > |
| 43 | + <button |
| 44 | + id="nav-close-btn" |
| 45 | + class="ml-auto block cursor-pointer" |
| 46 | + aria-label="Close navigation menu" |
| 47 | + title="Close navigation menu" |
| 48 | + > |
| 49 | + <Icon aria-hidden name="mdi:close" size={32} /> |
| 50 | + </button> |
| 51 | + <div class="flex flex-col h-full items-start gap-8 pt-16"> |
| 52 | + { |
| 53 | + WebsiteLinks.map((link) => ( |
| 54 | + <NavbarLink |
| 55 | + class="text-4xl font-light" |
| 56 | + href={`${SITE_BASE}/${link.url}`} |
| 57 | + > |
| 58 | + {link.name} |
| 59 | + </NavbarLink> |
| 60 | + )) |
| 61 | + } |
| 62 | + <ThemeSelector class:list="mt-4" /> |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + </nav> |
| 67 | + |
| 68 | + <script> |
| 69 | + function toggleNav() { |
| 70 | + document |
| 71 | + .querySelector('#mobile-menu') |
| 72 | + ?.classList.toggle('mobile-nav-open') |
| 73 | + } |
| 74 | + |
| 75 | + document |
| 76 | + .querySelector('#nav-open-btn') |
| 77 | + ?.addEventListener('click', toggleNav) |
| 78 | + document |
| 79 | + .querySelector('#nav-close-btn') |
| 80 | + ?.addEventListener('click', toggleNav) |
| 81 | + </script> |
| 82 | +</header> |
| 83 | + |
| 84 | +<script is:inline> |
| 85 | + function reComputeTheme() { |
| 86 | + if ( |
| 87 | + localStorage.theme === 'dark' || |
| 88 | + (!('theme' in localStorage) && |
| 89 | + window.matchMedia('(prefers-color-scheme: dark)').matches) |
| 90 | + ) { |
| 91 | + document.documentElement.classList.add('dark') |
| 92 | + } else { |
| 93 | + document.documentElement.classList.remove('dark') |
| 94 | + } |
| 95 | + |
| 96 | + const theme = localStorage.theme || 'auto' |
| 97 | + document |
| 98 | + .querySelectorAll(`[data-theme="theme-${theme}"]`) |
| 99 | + .forEach((el) => el.classList.add('active')) |
| 100 | + } |
| 101 | + |
| 102 | + function addThemeEventListeners() { |
| 103 | + themeButtons = document.querySelectorAll('.theme-button') |
| 104 | + themeButtons.forEach((button) => { |
| 105 | + button.addEventListener('click', () => { |
| 106 | + themeButtons.forEach((btn) => btn.classList.remove('active')) |
| 107 | + button.classList.add('active') |
| 108 | + if (button.dataset.theme === 'theme-auto') { |
| 109 | + localStorage.removeItem('theme') |
| 110 | + reComputeTheme() |
| 111 | + } else { |
| 112 | + localStorage.theme = button.dataset.theme.replace('theme-', '') |
| 113 | + document.documentElement.classList.toggle( |
| 114 | + 'dark', |
| 115 | + button.dataset.theme === 'theme-dark' |
| 116 | + ) |
| 117 | + } |
| 118 | + }) |
| 119 | + }) |
| 120 | + } |
| 121 | + |
| 122 | + // Set active class on OS theme change |
| 123 | + window |
| 124 | + .matchMedia('(prefers-color-scheme: dark)') |
| 125 | + .addEventListener('change', (_e) => { |
| 126 | + reComputeTheme() |
| 127 | + }) |
| 128 | + |
| 129 | + // run recomputeTheme when screen crosses 768px |
| 130 | + window.matchMedia('(min-width: 768px)').addEventListener('change', (_e) => { |
| 131 | + addThemeEventListeners() |
| 132 | + reComputeTheme() |
| 133 | + }) |
| 134 | + |
| 135 | + reComputeTheme() |
| 136 | + |
| 137 | + // Run on page load |
| 138 | + window.addEventListener('DOMContentLoaded', () => { |
| 139 | + addThemeEventListeners() |
| 140 | + reComputeTheme() |
| 141 | + }) |
| 142 | +</script> |
0 commit comments