Rinze/src/node_modules/components/Header.svelte

67 lines
2.5 KiB
Svelte
Raw Normal View History

2021-01-24 18:21:43 +00:00
<script>
import NavItem from "./NavItem.svelte";
2021-01-26 21:10:05 +00:00
import NavSeparator from "./NavSeparator.svelte";
import DarkModeButton from "components/DarkModeButton.svelte";
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
2021-01-24 18:21:43 +00:00
let menu_shown = false;
let detached = false;
let scrollY = 0;
2021-01-26 21:10:05 +00:00
function handleScroll(e) {
2021-01-24 18:21:43 +00:00
detached = scrollY > 64;
}
</script>
2021-01-26 21:10:05 +00:00
<svelte:window on:scroll={handleScroll} bind:scrollY />
2021-01-24 18:21:43 +00:00
<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:site-header__background--yuriko={isYurikoBirthday()} />
2021-01-24 18:21:43 +00:00
<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"
/>
2021-01-26 21:10:05 +00:00
<NavSeparator />
<DarkModeButton />
2021-01-24 18:21:43 +00:00
</div>
</header>
</div>
</div>
</div>