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

start mobile navbar

This commit is contained in:
JovannMC 2025-01-01 23:05:26 +03:00
parent 839d129cab
commit 1c4b6e3d20
No known key found for this signature in database
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
<script lang="ts">
import { browser } from "$app/environment";
import { page } from "$app/stores";
import { blur, duration } from "$lib/animation";
import { theme } from "$lib/store/index.svelte";
import clsx from "clsx";
import { MoonIcon, SunIcon } from "lucide-svelte";
import { quintOut } from "svelte/easing";
import Panel from "../visual/Panel.svelte";
import Logo from "../visual/svg/Logo.svelte";
import clsx from "clsx";
import { page } from "$app/stores";
import { MoonIcon, SunIcon } from "lucide-svelte";
import { theme } from "$lib/store/index.svelte";
import { blur, duration } from "$lib/animation";
import { quintOut } from "svelte/easing";
import { browser } from "$app/environment";
import type { SvelteComponent } from "svelte";
type Props = {
items: {
@ -43,7 +42,7 @@
href={item.url}
aria-label={item.name}
class={clsx(
"w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
{
"bg-panel-accented":
item.activeMatch($page.url.pathname) && !browser,
@ -125,7 +124,7 @@
</div>
{/if}
</div>
<p class=" font-medium">
<p class="font-medium hidden md:flex">
{item.name}
</p>
</div>
@ -148,7 +147,7 @@
></div>
{/if}
<div
class="w-32 h-full bg-accent rounded-xl flex items-center justify-center"
class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
>
<div class="h-5 w-full">
<Logo />
@ -157,10 +156,10 @@
{#each items as item, i (item.url)}
{@render link(item, i)}
{/each}
<div class="w-0.5 bg-separator h-full"></div>
<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
<button
onclick={theme.toggle}
class="w-14 h-full flex items-center justify-center"
class="w-14 h-full items-center justify-center hidden md:flex"
>
<SunIcon class="dynadark:hidden block" />
<MoonIcon class="dynadark:block hidden" />

3
src/routes/+layout.svelte
View File

@ -111,8 +111,9 @@
</svelte:head>
<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 gap-4">
<div class="flex flex-col justify-center items-center gap-4">
<Navbar {items} />
{#if items
.find((i) => i.url === "/convert")