feat(Nav): split out from layout, use snippet
This commit is contained in:
parent
6e5337f50a
commit
ddbd99a5e8
|
@ -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
17
src/routes/Nav.svelte
Normal 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>
|
Loading…
Reference in a new issue