mirror of https://github.com/VERT-sh/VERT.git
complete mobile navbar
This commit is contained in:
JovannMC
parent
1c4b6e3d20
commit
9b5bf4e274
|
|
@ -138,13 +138,14 @@
|
|||
{#if linkRects[selectedIndex]}
|
||||
<div
|
||||
class="absolute bg-panel-accented rounded-xl"
|
||||
style="width: {linkRects[selectedIndex]
|
||||
.width}px; height: {linkRects[selectedIndex]
|
||||
.height}px; top: {linkRects[selectedIndex].top -
|
||||
32}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>
|
||||
{#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}
|
||||
<div
|
||||
class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<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";
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
|
||||
import Navbar from "$lib/components/functional/Navbar.svelte";
|
||||
import Footer from "$lib/components/visual/Footer.svelte";
|
||||
import Logo from "$lib/components/visual/svg/Logo.svelte";
|
||||
import { files } from "$lib/store/index.svelte";
|
||||
import {
|
||||
InfoIcon,
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
|
||||
let shouldGoBack = writable(false);
|
||||
let navbar = $state<HTMLDivElement>();
|
||||
let isMobile = $state(false);
|
||||
let hover = $state(false);
|
||||
|
||||
const items = $derived<
|
||||
|
|
@ -79,6 +82,20 @@
|
|||
|
||||
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);
|
||||
|
|
@ -112,46 +129,67 @@
|
|||
|
||||
<div class="flex flex-col h-screen">
|
||||
<!-- TODO add logo -->
|
||||
<div class="p-8 w-screen flex justify-center z-50">
|
||||
<div class="flex flex-col justify-center items-center gap-4">
|
||||
<Navbar {items} />
|
||||
{#if items
|
||||
.find((i) => i.url === "/convert")
|
||||
?.activeMatch($page.url.pathname)}
|
||||
|
||||
<!-- Mobile logo -->
|
||||
{#if isMobile}
|
||||
<div class="flex justify-center items-center p-8">
|
||||
<div
|
||||
class="flex items-center justify-center w-36 h-20 bg-panel p-4 rounded-2xl"
|
||||
>
|
||||
<div
|
||||
in:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration: duration + 50,
|
||||
delay: 50,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: -24,
|
||||
end: 0,
|
||||
},
|
||||
scale: {
|
||||
start: 0.95,
|
||||
end: 1,
|
||||
},
|
||||
}}
|
||||
out:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: 0,
|
||||
end: 24,
|
||||
},
|
||||
scale: {
|
||||
start: 1,
|
||||
end: 1.05,
|
||||
},
|
||||
}}
|
||||
class="w-[120px] h-14 bg-accent rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<ConversionPanel />
|
||||
<div class="h-5 w-full">
|
||||
<Logo />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Desktop navbar -->
|
||||
{#if !isMobile}
|
||||
<div class="flex p-8 w-screen justify-center z-50">
|
||||
<div class="flex flex-col justify-center items-center gap-4">
|
||||
<Navbar {items} />
|
||||
{#if items
|
||||
.find((i) => i.url === "/convert")
|
||||
?.activeMatch($page.url.pathname)}
|
||||
<div
|
||||
in:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration: duration + 50,
|
||||
delay: 50,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: -24,
|
||||
end: 0,
|
||||
},
|
||||
scale: {
|
||||
start: 0.95,
|
||||
end: 1,
|
||||
},
|
||||
}}
|
||||
out:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: 0,
|
||||
end: 24,
|
||||
},
|
||||
scale: {
|
||||
start: 1,
|
||||
end: 1.05,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ConversionPanel />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-rows-1 grid-cols-1 h-full">
|
||||
{#key data.pathname}
|
||||
|
|
@ -190,7 +228,9 @@
|
|||
<div class="flex-grow">
|
||||
{@render children()}
|
||||
</div>
|
||||
<div class="w-full h-14 border-t border-separator relative">
|
||||
<div
|
||||
class="hidden md:block w-full h-14 border-t border-separator relative"
|
||||
>
|
||||
<Footer
|
||||
class="w-full h-full"
|
||||
items={{
|
||||
|
|
@ -206,6 +246,49 @@
|
|||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
{#if isMobile}
|
||||
<div class="fixed 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")
|
||||
?.activeMatch($page.url.pathname)}
|
||||
<div
|
||||
in:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration: duration + 50,
|
||||
delay: 50,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: -24,
|
||||
end: 0,
|
||||
},
|
||||
scale: {
|
||||
start: 0.95,
|
||||
end: 1,
|
||||
},
|
||||
}}
|
||||
out:blur={{
|
||||
blurMultiplier: 8,
|
||||
duration,
|
||||
easing: quintOut,
|
||||
y: {
|
||||
start: 0,
|
||||
end: 24,
|
||||
},
|
||||
scale: {
|
||||
start: 1,
|
||||
end: 1.05,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ConversionPanel />
|
||||
</div>
|
||||
{/if}
|
||||
<Navbar {items} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if data.pathname === "/"}
|
||||
|
|
|
|||
Loading…
Reference in New Issue