mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
9dd21e5661
commit
016fde7629
@ -1,277 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { Icon } from '@sveltejs/site-kit';
|
|
||||||
import { page } from '@sapper/app';
|
|
||||||
|
|
||||||
export let segment;
|
|
||||||
|
|
||||||
let open = false;
|
|
||||||
let visible = true;
|
|
||||||
|
|
||||||
// hide nav whenever we navigate
|
|
||||||
page.subscribe(() => {
|
|
||||||
open = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
|
|
||||||
let ul;
|
|
||||||
onMount(() => {
|
|
||||||
function handler(event) {
|
|
||||||
if (!open) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
open = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.addEventListener('touchstart', handler, {
|
|
||||||
capture: true
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
ul.removeEventListener('touchstart', handler, {
|
|
||||||
capture: true
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Prevents navbar to show/hide when clicking in docs sidebar
|
|
||||||
let hash_changed = false;
|
|
||||||
function handle_hashchange() {
|
|
||||||
hash_changed = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
let last_scroll = 0;
|
|
||||||
function handle_scroll() {
|
|
||||||
const scroll = window.pageYOffset;
|
|
||||||
if (!hash_changed) {
|
|
||||||
visible = (scroll < 50 || scroll < last_scroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
last_scroll = scroll;
|
|
||||||
hash_changed = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
header {
|
|
||||||
position: fixed;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100vw;
|
|
||||||
height: var(--nav-h);
|
|
||||||
padding: 0 var(--side-nav);
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
|
|
||||||
font-family: var(--font);
|
|
||||||
z-index: 100;
|
|
||||||
user-select: none;
|
|
||||||
transform: translate(0,calc(-100% - 1rem));
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
header.visible {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: var(--nav-h);
|
|
||||||
padding: 0 var(--side-nav) 0 var(--side-nav);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: transparent;
|
|
||||||
transform: none;
|
|
||||||
transition: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary {
|
|
||||||
list-style: none;
|
|
||||||
font-family: var(--font);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 3rem 0 0;
|
|
||||||
background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat;
|
|
||||||
background-size: 1em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul::after {
|
|
||||||
/* prevent clicks from registering if nav is closed */
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open {
|
|
||||||
padding: 0 0 1em 0;
|
|
||||||
background: white;
|
|
||||||
border-left: 1px solid #eee;
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
border-radius: 0 0 var(--border-r) var(--border-r);
|
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open li {
|
|
||||||
display: block;
|
|
||||||
text-align: right
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li a {
|
|
||||||
font-size: var(--h5);
|
|
||||||
padding: 0 .8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open li a {
|
|
||||||
padding: 1.5rem 3.7rem 1.5rem 4rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open li:first-child a {
|
|
||||||
padding-top: 2.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary :global(svg) {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home {
|
|
||||||
position: relative;
|
|
||||||
top: -.1rem;
|
|
||||||
width: 18rem;
|
|
||||||
height: 4.2rem;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
background: url(/svelte-logo-horizontal.svg) 0 50% no-repeat;
|
|
||||||
background-size: auto 100%;
|
|
||||||
/* z-index: 11; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: var(--prime)
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-background {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:not(.active) a:hover {
|
|
||||||
color: var(--flash);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 840px) {
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open {
|
|
||||||
padding: 0;
|
|
||||||
background: white;
|
|
||||||
border: none;
|
|
||||||
align-self: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open li {
|
|
||||||
display: inline;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.open li a {
|
|
||||||
font-size: var(--h5);
|
|
||||||
padding: 0 .8rem;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide-if-desktop {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<svelte:window on:hashchange={handle_hashchange} on:scroll={handle_scroll} />
|
|
||||||
|
|
||||||
<header class:visible="{visible || open}">
|
|
||||||
<nav>
|
|
||||||
<a rel="prefetch" href='.' class="home" title='Homepage'></a>
|
|
||||||
|
|
||||||
{#if open}
|
|
||||||
<div class="modal-background hide-if-desktop" on:click="{() => open = false}"></div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<ul
|
|
||||||
bind:this={ul}
|
|
||||||
class="primary"
|
|
||||||
class:open
|
|
||||||
on:mouseenter="{() => open = true}"
|
|
||||||
on:mouseleave="{() => open = false}"
|
|
||||||
>
|
|
||||||
<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
|
|
||||||
<li class:active="{segment === 'tutorial'}"><a rel="prefetch" href="tutorial">Tutorial</a></li>
|
|
||||||
<li class:active="{segment === 'docs'}"><a rel="prefetch" href="docs">API Docs</a></li>
|
|
||||||
<li class:active="{segment === 'examples'}"><a rel="prefetch" href="examples">Examples</a></li>
|
|
||||||
<li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li>
|
|
||||||
<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Blog</a></li>
|
|
||||||
<li><a href="https://sapper.svelte.technology">Sapper</a></li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a href="https://discord.gg/yy75DKs" title="Discord Chat">
|
|
||||||
<Icon name="message-square" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/sveltejs/svelte" title="Github Repo">
|
|
||||||
<Icon name="github" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
Loading…
Reference in new issue