95 lines
2.3 KiB
Svelte
95 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { link, location } from "svelte-spa-router";
|
|
import { faGear } from "@fortawesome/free-solid-svg-icons";
|
|
import Fa from "svelte-fa";
|
|
import Settings from "./Settings/Settings.svelte";
|
|
import EnergyToday from "./Energy/EnergyToday.svelte";
|
|
Fa;
|
|
|
|
type Link = {
|
|
label: string;
|
|
href: string;
|
|
base: string;
|
|
};
|
|
let sublinks: Link[] = [
|
|
{
|
|
label: "Daily",
|
|
href: "/daily",
|
|
base: "/daily",
|
|
},
|
|
{
|
|
label: "Weekly",
|
|
href: "/weekly",
|
|
base: "/weekly",
|
|
},
|
|
{
|
|
label: "Monthly",
|
|
href: "/monthly",
|
|
base: "/monthly",
|
|
},
|
|
{
|
|
label: "Yearly",
|
|
href: "/yearly",
|
|
base: "/yearly",
|
|
},
|
|
];
|
|
|
|
let selected = "Energy";
|
|
$: {
|
|
sublinks = sublinks.map((sublink: Link) => {
|
|
return {
|
|
...sublink,
|
|
href: `/${selected}${sublink.base}`,
|
|
};
|
|
});
|
|
}
|
|
|
|
let showModal = false;
|
|
</script>
|
|
|
|
<header
|
|
class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
|
|
border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
|
|
>
|
|
<div>
|
|
<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
|
|
<a
|
|
use:link
|
|
class={"/" == $location
|
|
? "transition-colors hover:text-foreground/80"
|
|
: "transition-colors hover:text-foreground/80 text-foreground/60"}
|
|
href="/"
|
|
on:click={(e) => (selected = "Energy")}>Energy</a
|
|
>
|
|
<a
|
|
use:link
|
|
class={"/Weight" == $location
|
|
? "transition-colors hover:text-foreground/80"
|
|
: "transition-colors hover:text-foreground/80 text-foreground/60"}
|
|
href="/Weight"
|
|
on:click={(e) => (selected = "Weight")}>Weight</a
|
|
>
|
|
</nav>
|
|
<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
|
|
{#each sublinks as { label, href }}
|
|
<a
|
|
use:link
|
|
{href}
|
|
class={href == $location
|
|
? "transition-colors hover:text-foreground/80"
|
|
: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
|
|
>
|
|
{/each}
|
|
</nav>
|
|
</div>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}>
|
|
<button>
|
|
<Fa icon={faGear} scale={2} />
|
|
</button>
|
|
</div>
|
|
<EnergyToday />
|
|
</header>
|
|
|
|
<Settings bind:showModal />
|