Skip to content

Commit

Permalink
feat: added mobile menu to website
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonasgeiler
jonasgeiler committed Apr 22, 2024
1 parent 360223f commit 0605964
Showing 1 changed file with 122 additions and 7 deletions.
129 changes: 122 additions & 7 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { browser } from '$app/environment';
let darkMode = true;
let mobileMenuOpen = false;
function handleSwitchDarkMode() {
darkMode = !darkMode;
Expand All @@ -28,11 +29,11 @@
}
</script>

<nav class="left drawer">
<nav class="left drawer l">
<header class="fixed">
<nav>
<i>
<img src="{base}/logo.svg" srcset="{base}/logo.svg 2x" aria-hidden="true" alt="Logo" />
<i aria-hidden="true">
<img src="{base}/logo.svg" srcset="{base}/logo.svg 2x" alt="Logo" />
</i>
<h6>svelte-tiny-virtual-list</h6>
</nav>
Expand All @@ -42,7 +43,8 @@
<i aria-hidden="true">description</i>
<div>README</div>
</a>
<a href="https://github.com/jonasgeiler/svelte-tiny-virtual-list" target="_blank">
<a href="https://github.com/jonasgeiler/svelte-tiny-virtual-list"
target="_blank">
<i aria-hidden="true">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
Expand Down Expand Up @@ -79,11 +81,13 @@
<i aria-hidden="true">view_day</i>
<div>Variable heights</div>
</a>
<a href="/examples/horizontal-list" class:active={$page.route.id === '/examples/horizontal-list'}>
<a href="/examples/horizontal-list"
class:active={$page.route.id === '/examples/horizontal-list'}>
<i aria-hidden="true">view_week</i>
<div>Horizontal list</div>
</a>
<a href="/examples/scroll-to-index" class:active={$page.route.id === '/examples/scroll-to-index'}>
<a href="/examples/scroll-to-index"
class:active={$page.route.id === '/examples/scroll-to-index'}>
<i aria-hidden="true">pin</i>
<div>Scroll to index</div>
</a>
Expand All @@ -97,7 +101,8 @@

<div class="small-divider"></div>
<label for="">Demos</label>
<a href="/demos/hacker-news" class:active={$page.route.id === '/demos/hacker-news'}>
<a href="/demos/hacker-news"
class:active={$page.route.id === '/demos/hacker-news'}>
<i aria-hidden="true">newspaper</i>
<div>Hacker News</div>
</a>
Expand All @@ -108,6 +113,116 @@
</button>
</nav>

<nav class="top s m left-align">
<button class="circle transparent" on:click={() => mobileMenuOpen = true}>
<i aria-hidden="true">menu</i>
</button>
<i aria-hidden="true">
<img src="{base}/logo.svg" srcset="{base}/logo.svg 2x" alt="Logo" />
</i>
<h6 class="m">svelte-tiny-virtual-list</h6>
<div class="max"></div>
<button class="circle border" on:click={handleSwitchDarkMode}>
<i aria-hidden="true">{darkMode ? 'light_mode' : 'dark_mode'}</i>
</button>
</nav>
<dialog class="left s m" class:active={mobileMenuOpen}>
<header class="fixed">
<nav>
<i aria-hidden="true">
<img src="{base}/logo.svg" srcset="{base}/logo.svg 2x" alt="Logo" />
</i>
<h6 class="m">svelte-tiny-virtual-list</h6>
<div class="max"></div>
<button class="transparent circle" on:click={() => mobileMenuOpen = false}>
<i aria-hidden="true">close</i>
</button>
</nav>
</header>

<nav class="drawer no-padding no-margin">
<a href="/" class:active={$page.route.id === '/'} on:click={() => mobileMenuOpen = false}>
<i aria-hidden="true">description</i>
<div>README</div>
</a>
<a href="https://github.com/jonasgeiler/svelte-tiny-virtual-list"
target="_blank">
<i aria-hidden="true">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
</i>
<div>GitHub <i aria-hidden="true" class="tiny">launch</i></div>
</a>
<a href="https://npmjs.com/package/svelte-tiny-virtual-list" target="_blank">
<i aria-hidden="true">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
/>
</svg>
</i>
<div>npm <i aria-hidden="true" class="tiny">launch</i></div>
</a>

<div class="small-divider"></div>
<label for="">Examples</label>
<a
href="/examples/elements-of-equal-height"
class:active={$page.route.id === '/examples/elements-of-equal-height'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">view_headline</i>
<div>Elements of equal height</div>
</a>
<a
href="/examples/variable-heights"
class:active={$page.route.id === '/examples/variable-heights'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">view_day</i>
<div>Variable heights</div>
</a>
<a
href="/examples/horizontal-list"
class:active={$page.route.id === '/examples/horizontal-list'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">view_week</i>
<div>Horizontal list</div>
</a>
<a
href="/examples/scroll-to-index"
class:active={$page.route.id === '/examples/scroll-to-index'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">pin</i>
<div>Scroll to index</div>
</a>
<a
href="/examples/controlled-scroll-offset"
class:active={$page.route.id === '/examples/controlled-scroll-offset'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">unfold_more</i>
<div>Controlled scroll offset</div>
</a>

<div class="small-divider"></div>
<label for="">Demos</label>
<a
href="/demos/hacker-news"
class:active={$page.route.id === '/demos/hacker-news'}
on:click={() => mobileMenuOpen = false}
>
<i aria-hidden="true">newspaper</i>
<div>Hacker News</div>
</a>
</nav>
</dialog>

<main id="content" class="responsive flex flex-column">
<slot />
</main>
Expand Down

0 comments on commit 0605964

Please sign in to comment.