Files
calorie-tracker/src/lib/components/header/Header.svelte
Fractal-Tess 234b05864c links update
2022-11-07 13:52:24 +02:00

42 lines
1.3 KiB
Svelte

<script lang="ts">
import ThemeToggleIcon from '$lib/components/buttons/ThemeToggleIcon.svelte';
import { theme } from '$lib/stores/theme';
import { appWindow } from '@tauri-apps/api/window';
import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import Fa from 'svelte-fa';
import HeaderNav from '$lib/components/nav/HorizontalNav.svelte';
import { navLinks } from '$data/NavLinks';
</script>
<div
data-tauri-drag-region
class="h-12 bg-base-100 shadow-lg items-center justify-between flex px-2"
>
<button
on:click={theme.toggleTheme}
class="hover:text-secondary ml-2 transition-all"
>
<ThemeToggleIcon class="w-8" />
</button>
<HeaderNav {navLinks} />
<div class="flex [&>*]:px-2 h-full [&>*]:transition-all">
<a
target="_blank"
href="https://github.com/Fractal-Tess/Svelte-Tauri"
class="hover:text-secondary flex items-center"
rel="noreferrer"
>
<Fa icon={faGithub} size="lg" />
</a>
<button on:click={appWindow.minimize} class="text-xl hover:text-secondary">
<Fa icon={faWindowMinimize} />
</button>
<button on:click={appWindow.close} class="text-2xl hover:text-secondary">
<Fa icon={faXmark} />
</button>
</div>
</div>