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

fix mobile loading desktop navbar on first load 

though if the user resizes desktop/mobile, highlight of current page disappears and only appears on the original size

this is a scuffed way to do navbar lol
This commit is contained in:
JovannMC 2025-01-03 15:34:06 +03:00
parent e8ff930934
commit 8c724b0f0a
No known key found for this signature in database
1 changed files with 90 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/routes/+layout.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from "$app/environment";
import { beforeNavigate, goto } from "$app/navigation";
import { page } from "$app/stores";
import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
@ -25,7 +24,6 @@
let shouldGoBack = writable(false);
let navbar = $state<HTMLDivElement>();
let isMobile = $state(false);
let hover = $state(false);
const items = $derived<
@ -82,20 +80,6 @@
navbar?.addEventListener("mouseenter", mouseEnter);
navbar?.addEventListener("mouseleave", mouseLeave);
if (browser) {
isMobile = window.innerWidth < 768;
const handleResize = () => {
isMobile = window.innerWidth < 768;
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}
});
let goingLeft = $state(false);
@ -128,10 +112,9 @@
</svelte:head>
<div class="flex flex-col h-screen">
<!-- TODO add logo -->
<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
<!-- Mobile logo -->
{#if isMobile}
<div class="flex md:hidden justify-center items-center p-8">
<div
class="flex items-center justify-center w-36 h-20 bg-panel p-4 rounded-2xl"
@ -145,11 +128,9 @@
</div>
</div>
</div>
{/if}
<!-- Desktop navbar -->
{#if !isMobile}
<div class="flex p-8 w-screen justify-center z-50">
<div class="hidden md:flex p-8 w-screen justify-center z-50">
<div class="flex flex-col justify-center items-center gap-4">
<Navbar {items} />
{#if items
@ -189,7 +170,6 @@
{/if}
</div>
</div>
{/if}
<div class="grid grid-rows-1 grid-cols-1 h-full">
{#key data.pathname}
@ -247,8 +227,10 @@
{/key}
</div>
{#if isMobile}
<div class="fixed bottom-0 left-0 w-screen p-8 justify-center z-50">
<!-- Mobile navbar -->
<div
class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
>
<div class="flex flex-col justify-center items-center gap-4">
{#if items
.find((i) => i.url === "/convert")
@ -288,7 +270,6 @@
<Navbar {items} />
</div>
</div>
{/if}
</div>
{#if data.pathname === "/"}