Mobile nav bar improvements
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
This commit is contained in:
parent
8dd959bb03
commit
b6b4b5c8f5
|
@ -18,6 +18,8 @@
|
|||
profileStore.set(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
let mobileNavOpen = false;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
@ -34,13 +36,16 @@
|
|||
<h1>{import.meta.env.VITE_TITLE}</h1>
|
||||
</a>
|
||||
|
||||
<button class="mobile-nav-toggle">
|
||||
<div class="mobile-shade {mobileNavOpen ? 'mobile-open' : ''}" />
|
||||
<button class="mobile-nav-toggle {mobileNavOpen ? 'mobile-active' : ''}" on:click={() => (mobileNavOpen = !mobileNavOpen)}>
|
||||
<Menu size={32} />
|
||||
</button>
|
||||
|
||||
<nav>
|
||||
<nav class={mobileNavOpen ? "mobile-open" : ""}>
|
||||
{#if $profileStore !== undefined}
|
||||
<div style="height:50px;">
|
||||
<HeaderDropdown profile={$profileStore} />
|
||||
</div>
|
||||
{:else}
|
||||
<a href="/register" use:link>Register</a>
|
||||
<a href="/login" use:link>Login</a>
|
||||
|
@ -151,6 +156,10 @@
|
|||
aspect-ratio: 1/1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.mobile-active {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
> nav {
|
||||
|
@ -158,9 +167,25 @@
|
|||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
z-index: 9998;
|
||||
display: none;
|
||||
|
||||
&.mobile-open {
|
||||
display: block;
|
||||
background-color: var(--bg-panel-action);
|
||||
}
|
||||
}
|
||||
|
||||
> .mobile-shade.mobile-open {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
content: "";
|
||||
z-index: 9997;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue