116 lines
2.8 KiB
Text
116 lines
2.8 KiB
Text
---
|
|
import { Icon } from 'astro-iconify';
|
|
// import ThemeSwitcher from "~/components/theme-switcher.astro";
|
|
|
|
const socials = [
|
|
{
|
|
name: 'GitHub',
|
|
url: 'https://github.com/astro-reactive/astro-reactive',
|
|
icon: 'fa-brands:github-alt',
|
|
},
|
|
{
|
|
name: 'Discord',
|
|
url: 'https://discord.gg/kkvW7GYNAp',
|
|
icon: 'fa-brands:discord',
|
|
},
|
|
];
|
|
---
|
|
|
|
<header
|
|
id="page-header"
|
|
class="absolute bottom-0 z-10 flex items-center justify-between w-full px-8 py-4 text-white border-b border-transparent"
|
|
>
|
|
<div class="flex items-center gap-3 hover:!text-default">
|
|
<!-- <h1 class="text-">Astro Reactive</h1> -->
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-6">
|
|
<ul class="flex gap-4">
|
|
{
|
|
socials.map((social) => (
|
|
<li class="list-none">
|
|
<a
|
|
class="flex items-center justify-center w-12 h-12 p-3 border-2 border-current rounded-full"
|
|
href={social.url}
|
|
>
|
|
<Icon name={social.icon} class="h-full" />
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
<!-- <button
|
|
id="open-nav-button"
|
|
type="button"
|
|
class="btn sm:hidden"
|
|
aria-label="Navigation"
|
|
>
|
|
<Icon pack="mdi" name="menu" class="h-8" />
|
|
</button>
|
|
<ThemeSwitcher /-->
|
|
</div>
|
|
<div id="menu-modal" class="hidden modal" aria-hidden="true">
|
|
<div class="fixed inset-0 px-8 py-4 bg-default text-default">
|
|
<div class="space-y-4" role="dialog" aria-modal="true">
|
|
<header class="text-right">
|
|
<button id="close-nav-button" type="button" class="btn" aria-label="Close navigation">
|
|
<Icon pack="mdi" name="close" class="h-8" />
|
|
</button>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
import MicroModal from 'micromodal';
|
|
|
|
const menuModalId = 'menu-modal';
|
|
|
|
const header: HTMLElement = document.querySelector('#page-header');
|
|
const page = document.documentElement;
|
|
const menu = document.querySelector(`#${menuModalId} ul`);
|
|
const openNavButton = document.querySelector('#open-nav-button');
|
|
const closeNavButton = document.querySelector('#close-nav-button');
|
|
|
|
const openMenu = () => {
|
|
MicroModal.show(menuModalId, { disableScroll: true });
|
|
};
|
|
|
|
const closeMenu = () => {
|
|
MicroModal.close(menuModalId);
|
|
};
|
|
|
|
openNavButton?.addEventListener('click', openMenu);
|
|
closeNavButton?.addEventListener('click', closeMenu);
|
|
|
|
document?.addEventListener('scroll', () => {
|
|
const d = page.clientHeight - page.scrollTop - header.offsetHeight;
|
|
header.classList.toggle('fixed-header', d < 0);
|
|
});
|
|
|
|
menu?.addEventListener('click', (event) => {
|
|
if ((event.target as HTMLElement).tagName === 'A') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<noscript>
|
|
<style>
|
|
#open-nav-button {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
|
|
<style>
|
|
.fixed-header {
|
|
@apply fixed top-0 bottom-auto;
|
|
@apply text-default bg-default border-default;
|
|
}
|
|
.modal.is-open {
|
|
@apply block;
|
|
}
|
|
</style>
|