sage
/
kafka-dance-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better hamburger menu.

This commit is contained in:
Sage Vaillancourt 2022-09-09 07:51:40 -04:00
parent c9ea301ac1
commit 2859f57681
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/header/NavBar.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import { fade } from 'svelte/transition'
let dropdownVisible = false let dropdownVisible = false
</script> </script>
@ -29,7 +30,8 @@
<nav class="mobile"> <nav class="mobile">
<button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button> <button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
{#if dropdownVisible} {#if dropdownVisible}
<ul class="mobile"> <!-- TODO: Click-away layer -->
<ul class="mobile" transition:fade={{duration: 300}}>
<li class:active={$page.url.pathname === '/'}> <li class:active={$page.url.pathname === '/'}>
<a sveltekit:prefetch href="/">Topic Search</a> <a sveltekit:prefetch href="/">Topic Search</a>
</li> </li>
@ -83,14 +85,14 @@
ul.mobile { ul.mobile {
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
padding: 128px 0 0; padding: 256px 0 1em;
margin: 0; margin: 0;
height: 3em; width: 50vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
list-style: none; list-style: none;
background: var(--background); background-color: rgba(255, 255, 255);
background-size: contain; background-size: contain;
} }
@ -125,6 +127,16 @@
transition: color 0.2s linear; transition: color 0.2s linear;
} }
@media (max-width: 719px) {
nav a {
font-size: 1rem;
line-height: 200%;
}
li {
margin-top: 1em;
}
}
a:hover { a:hover {
color: var(--accent-color); color: var(--accent-color);
} }
@ -138,5 +150,8 @@
border-radius: 0; border-radius: 0;
border-style: none; border-style: none;
} }
button:hover {
background-color: white;
}
</style> </style>