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);
|
profileStore.set(undefined);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let mobileNavOpen = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -34,13 +36,16 @@
|
||||||
<h1>{import.meta.env.VITE_TITLE}</h1>
|
<h1>{import.meta.env.VITE_TITLE}</h1>
|
||||||
</a>
|
</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} />
|
<Menu size={32} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<nav>
|
<nav class={mobileNavOpen ? "mobile-open" : ""}>
|
||||||
{#if $profileStore !== undefined}
|
{#if $profileStore !== undefined}
|
||||||
<HeaderDropdown profile={$profileStore} />
|
<div style="height:50px;">
|
||||||
|
<HeaderDropdown profile={$profileStore} />
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<a href="/register" use:link>Register</a>
|
<a href="/register" use:link>Register</a>
|
||||||
<a href="/login" use:link>Login</a>
|
<a href="/login" use:link>Login</a>
|
||||||
|
@ -151,6 +156,10 @@
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&.mobile-active {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> nav {
|
> nav {
|
||||||
|
@ -158,9 +167,25 @@
|
||||||
top: 50px;
|
top: 50px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
height: auto;
|
||||||
z-index: 9998;
|
z-index: 9998;
|
||||||
display: none;
|
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