RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix mobile navbar again

This commit is contained in:
JovannMC 2025-01-03 15:29:35 +03:00
parent 44a96f715b
commit 1162082dc2
No known key found for this signature in database
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/functional/Navbar.svelte
View File

@ -138,14 +138,15 @@
{#if linkRects[selectedIndex]} {#if linkRects[selectedIndex]}
<div <div
class="absolute bg-panel-accented rounded-xl" class="absolute bg-panel-accented rounded-xl"
style="width: {linkRects[selectedIndex].width}px; height: {linkRects[selectedIndex].height}px; top: {linkRects[selectedIndex].top - (containerRect?.top || 0)}px; left: {linkRects[selectedIndex].left - (containerRect?.left || 0)}px; transition: left var(--transition) {duration}ms, top var(--transition) {duration}ms;" style="width: {linkRects[selectedIndex]
.width}px; height: {linkRects[selectedIndex]
.height}px; top: {linkRects[selectedIndex].top -
(containerRect?.top || 0)}px; left: {linkRects[
selectedIndex
].left -
(containerRect?.left ||
0)}px; transition: left var(--transition) {duration}ms, top var(--transition) {duration}ms;"
></div> ></div>
{#if browser && window.innerWidth < 768}
<div
class="absolute bg-panel-accented rounded-xl"
style="width: {linkRects[selectedIndex].width}px; height: {linkRects[selectedIndex].height / 2}px; bottom: {window.innerHeight - linkRects[selectedIndex].bottom}px; left: {linkRects[selectedIndex].left - (containerRect?.left || 0)}px; transition: left var(--transition) {duration}ms, bottom var(--transition) {duration}ms;"
></div>
{/if}
{/if} {/if}
<div <div
class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex" class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
@ -157,10 +158,10 @@
{#each items as item, i (item.url)} {#each items as item, i (item.url)}
{@render link(item, i)} {@render link(item, i)}
{/each} {/each}
<div class="w-0.5 bg-separator h-full hidden md:flex"></div> <div class="w-0.5 bg-separator h-full flex"></div>
<button <button
onclick={theme.toggle} onclick={theme.toggle}
class="w-14 h-full items-center justify-center hidden md:flex" class="w-14 h-full items-center justify-center flex"
> >
<SunIcon class="dynadark:hidden block" /> <SunIcon class="dynadark:hidden block" />
<MoonIcon class="dynadark:block hidden" /> <MoonIcon class="dynadark:block hidden" />