feat(Nav): split out from layout, use snippet

This commit is contained in:
mei (ckie) 2024-10-24 16:45:11 +03:00
parent 6e5337f50a
commit ddbd99a5e8
Signed by: ckie
GPG key ID: 13E79449C0525215
3 changed files with 20 additions and 11 deletions

View file

@ -1,7 +1,8 @@
<script lang="ts">
import { page } from "$app/stores";
import "../main.css";
import Footer from "./footer.svelte";
import Footer from "./Footer.svelte";
import Nav from "./Nav.svelte";
let { children } = $props();
globalThis.PKGS = "petalpkgs";
@ -26,16 +27,7 @@
</a>
<span></span>
<div
class="max-md:hidden text-lg flex gap-2 h-full items-center
*:py-1 *:px-2 *:h-min *:bg-coral-100 *:rounded-md *:border-b-2 *:border-r-2 *:border-coral-200 text-blue-950
*:hover:bg-coral-200 <-TODO-fix-that-hover"
>
<a href="/colors" class="no-link-style">colors</a>
<a href="/docs/intro" class="no-link-style">intro</a>
<a href="https://fleurixos.org" class="no-link-style">Try {DISTRO}</a>
<a href="https://petalpkgs.org" class="no-link-style">Use {PKGS}</a>
</div>
<Nav />
</div>
</nav>

17
src/routes/Nav.svelte Normal file
View file

@ -0,0 +1,17 @@
{#snippet link(to, title)}
<a
href={to}
class="no-link-style
py-1 px-2 h-min bg-coral-100 rounded-md border-b-2 border-r-2 border-coral-200 text-blue-950 hover:bg-coral-200"
>{title}</a
>
{/snippet}
<div class="max-md:hidden text-lg flex gap-2 h-full items-center">
{@render link("/docs/intro", "intro")}
{@render link("/colors", "colors")}
<!--
{@render link("https://fleurixos.org", `Try ${DISTRO}`)}
{@render link("https://petalpkgs.org", `Use ${PKGS}`)}
-->
</div>