mirror of https://github.com/Damillora/Rinze.git
67 lines
2.5 KiB
Svelte
67 lines
2.5 KiB
Svelte
<script>
|
|
import NavItem from "./NavItem.svelte";
|
|
import NavSeparator from "./NavSeparator.svelte";
|
|
import DarkModeButton from "components/DarkModeButton.svelte";
|
|
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
|
|
|
|
let menu_shown = false;
|
|
let detached = false;
|
|
let scrollY = 0;
|
|
function handleScroll(e) {
|
|
detached = scrollY > 64;
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:scroll={handleScroll} bind:scrollY />
|
|
|
|
<div>
|
|
<div class:site-header={true} class:enabled={menu_shown} class:detached>
|
|
<div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} />
|
|
<div class="site-header__inner">
|
|
<header class="header">
|
|
<div class="header__top">
|
|
<div
|
|
class="header__nav-button"
|
|
on:click={() => (menu_shown = !menu_shown)}
|
|
>
|
|
<span class="header__icon material-icons" alt="menu"
|
|
>menu</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="header__title"
|
|
on:click={() =>
|
|
(menu_shown = menu_shown
|
|
? !menu_shown
|
|
: menu_shown)}
|
|
>
|
|
<a href="/"><h1>Damillora</h1></a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class:menu={true}
|
|
class:enabled={menu_shown}
|
|
on:click={() => (menu_shown = !menu_shown)}
|
|
>
|
|
<NavItem link="/about" icon="person" text="About" />
|
|
<NavItem link="/projects" icon="work" text="Projects" />
|
|
<NavItem
|
|
link="/games"
|
|
icon="videogame_asset"
|
|
text="Game Profile"
|
|
/>
|
|
<NavItem link="/links" icon="share" text="Links" />
|
|
<NavItem link="/contact" icon="contacts" text="Contact" />
|
|
<NavItem
|
|
link="//blog.nanao.moe"
|
|
icon="rss_feed"
|
|
text="Blog"
|
|
/>
|
|
<NavSeparator />
|
|
<DarkModeButton />
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</div>
|