jakehamilton/floral.systems
0
0
Fork 0
forked from the-distro/floral.systems
Code Pull requests Activity

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

Browse source
This commit is contained in:
mei (ckie) 2024-10-24 16:45:11 +03:00
parent 6e5337f50a
commit ddbd99a5e8
Signed by untrusted user: ckie
GPG key ID: 13E79449C0525215
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/+layout.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
import "../main.css"; import "../main.css";
import Footer from "./footer.svelte"; import Footer from "./Footer.svelte";
import Nav from "./Nav.svelte";
let { children } = $props(); let { children } = $props();
globalThis.PKGS = "petalpkgs"; globalThis.PKGS = "petalpkgs";
@ -26,16 +27,7 @@
</a> </a>
<span></span> <span></span>
<div <Nav />
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>
</div> </div>
</nav> </nav>

0
src/routes/footer.svelte → src/routes/Footer.svelte
View file

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>