55 lines
1.3 KiB
Svelte
55 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { Link } from '$/types';
|
|
|
|
export let pathname: string;
|
|
|
|
function remove_suffixes(s: string) {
|
|
const suffixes = ["index.html", ".html"];
|
|
|
|
for (const suffix of suffixes) {
|
|
if (!s.endsWith(suffix)) {
|
|
continue;
|
|
}
|
|
|
|
s = s.substring(0, s.length - suffix.length);
|
|
}
|
|
return s;
|
|
}
|
|
|
|
// TODO: add unit tests for this.
|
|
function is_selected(a: string, b: string) {
|
|
return remove_suffixes(a) === remove_suffixes(b);
|
|
}
|
|
|
|
const links: Link[] = [
|
|
{
|
|
url: "https://links.axelen.xyz",
|
|
name: "links",
|
|
},
|
|
{
|
|
url: "https://github.com/Axelen123",
|
|
name: "my stuff",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<nav class="swup w-screen h-20 top-0 flex justify-center items-center border-red-400 border-t-8 mb-8">
|
|
<div class="site-view inline-block">
|
|
<a href="/" class="text-red-400 text-lg float-left">
|
|
axelen.xyz
|
|
</a>
|
|
<div id="nav-links" class="float-right space-x-12">
|
|
{#each links as link}
|
|
<a class="text-lg text-red-200" data-swup-preload class:site-selected={is_selected(pathname, link.url)} href={link.url}>{link.name}</a>
|
|
{/each}
|
|
<div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style lang="scss">
|
|
@use "./edge.scss";
|
|
|
|
.site-selected {
|
|
@apply font-semibold underline underline-offset-4 decoration-red-500 decoration-4;
|
|
}
|
|
</style>
|