50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<script>
|
|
import './header.css';
|
|
import Button from './Button.svelte';
|
|
import Image from './Image.svelte';
|
|
import { hasSession } from '../utils/stores.js';
|
|
import { onMount } from 'svelte';
|
|
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
let user = null;
|
|
onMount(async () => {
|
|
user = hasSession();
|
|
});
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let avatarUrl = '';
|
|
|
|
function onLogin(event) {
|
|
dispatch('login', event);
|
|
}
|
|
function onLogout(event) {
|
|
dispatch('logout', event);
|
|
}
|
|
|
|
function redirect(url) {
|
|
return () => {
|
|
window.location.pathname = url;
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<header>
|
|
<div class="wrapper">
|
|
<div>
|
|
<Image src="./clipboard.svg" on:click={redirect('/')} />
|
|
<h1>Todo</h1>
|
|
</div>
|
|
<div>
|
|
{#if user}
|
|
<Image src={avatarUrl} alt="user profile picture" on:click={redirect('/settings')} />
|
|
<Button size="small" on:click={onLogout} label="Log out" />
|
|
{/if}
|
|
{#if !user}
|
|
<Button size="small" on:click={onLogin} label="Log in" />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</header>
|