Header, swtching icon => reimplement to component
This commit is contained in:
parent
6def6e8d8f
commit
b04624c7ed
|
@ -0,0 +1,56 @@
|
|||
<script lang="ts">
|
||||
import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
|
||||
import * as config from '$lib/config';
|
||||
|
||||
//Current Dark/Light Mode
|
||||
import { modeCurrent } from '@skeletonlabs/skeleton';
|
||||
console.log(modeCurrent);
|
||||
let iconGitHub: string;
|
||||
|
||||
$: {
|
||||
iconGitHub = $modeCurrent ? '/logos/github-mark.png' : '/logos/github-mark-white.png';
|
||||
}
|
||||
</script>
|
||||
<AppBar>
|
||||
<!-- Left-side Header -->
|
||||
<svelte:fragment slot="lead">
|
||||
<a href="/">
|
||||
<div class="items-center align-middle flex gap-2">
|
||||
<img src="/images/Logo.png" alt="Logo" class="w-8 h-8" />
|
||||
|
||||
<strong class="text-3xl uppercase">{config.title}</strong>
|
||||
</div>
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="headline">
|
||||
<strong>Blog about the struggles of building a blog!</strong>
|
||||
</svelte:fragment>
|
||||
<!-- Right-side Header -->
|
||||
<svelte:fragment slot="trail">
|
||||
<!-- LinkedIn -->
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="/logos/LI-In-Bug.png"
|
||||
width="24"
|
||||
height="24"
|
||||
alt="Matt's LinkedIn Acount"
|
||||
/>
|
||||
</a>
|
||||
<!-- github -->
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://github.com/matthieu42morin"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src={iconGitHub} width="24" height="24" alt="Github account" />
|
||||
</a>
|
||||
|
||||
<LightSwitch />
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
Loading…
Reference in New Issue