mirror of
https://github.com/Damillora/Rinze.git
synced 2024-10-31 19:37:32 +00:00
62 lines
2.2 KiB
Svelte
62 lines
2.2 KiB
Svelte
|
<script>
|
||
|
|
import NavItem from "./NavItem.svelte";
|
||
|
|
|
||
|
|
let menu_shown = false;
|
||
|
|
let detached = false;
|
||
|
|
let scrollY = 0;
|
||
|
|
function handleScroll (e) {
|
||
|
|
detached = scrollY > 64;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:window on:scroll={handleScroll} bind:scrollY="{scrollY}" />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class:site-header={true} class:enabled={menu_shown} class:detached>
|
||
|
|
<div class:site-header__background={true} class:enabled={menu_shown} />
|
||
|
|
<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"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|