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"> <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 Panel from "../visual/Panel.svelte";
import Logo from "../visual/svg/Logo.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 = { type Props = {
items: { items: {
@ -43,7 +42,7 @@
href={item.url} href={item.url}
aria-label={item.name} aria-label={item.name}
class={clsx( 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": "bg-panel-accented":
item.activeMatch($page.url.pathname) && !browser, item.activeMatch($page.url.pathname) && !browser,
@ -125,7 +124,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<p class=" font-medium"> <p class="font-medium hidden md:flex">
{item.name} {item.name}
</p> </p>
</div> </div>
@ -148,7 +147,7 @@
></div> ></div>
{/if} {/if}
<div <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"> <div class="h-5 w-full">
<Logo /> <Logo />
@ -157,10 +156,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"></div> <div class="w-0.5 bg-separator h-full hidden md:flex"></div>
<button <button
onclick={theme.toggle} 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" /> <SunIcon class="dynadark:hidden block" />
<MoonIcon class="dynadark:block hidden" /> <MoonIcon class="dynadark:block hidden" />

3
src/routes/+layout.svelte
View File

@ -111,8 +111,9 @@
</svelte:head> </svelte:head>
<div class="flex flex-col h-screen"> <div class="flex flex-col h-screen">
<!-- TODO add logo -->
<div class="p-8 w-screen flex justify-center z-50"> <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} /> <Navbar {items} />
{#if items {#if items
.find((i) => i.url === "/convert") .find((i) => i.url === "/convert")