GoMembership/frontend/src/lib/components/Header.svelte

<script>
	import { onMount } from 'svelte';
	import { applyAction, enhance } from '$app/forms';
	import { page } from '$app/stores';
	// import Developer from "$lib/img/hero-image.png";
	// import Avatar from "$lib/img/TeamAvatar.jpeg";
	import { t } from 'svelte-i18n';
	import { writable } from 'svelte/store';
	onMount(() => {
		console.log('Page data in Header:', $page);
		document.documentElement.setAttribute('data-theme', $theme);
	});

	$: {
		console.log('Page data updated:', $page);
	}
	// Create a theme store
	const theme = writable(
		typeof window !== 'undefined' ? localStorage.getItem('theme') || 'dark' : 'dark'
	);

	// Update theme and localStorage when changed
	function toggleTheme() {
		theme.update((current) => {
			const newTheme = current === 'dark' ? 'bright' : 'dark';
			localStorage.setItem('theme', newTheme);
			document.documentElement.setAttribute('data-theme', newTheme);
			return newTheme;
		});
	}
</script>

<header class="header">
	<div class="header-container">
		<div class="header-left">
			<div class="header-crafted-by-container">
				<!-- <a href="https://tiny-bits.net/">
          <span>Developed by</span><img
            src={Developer}
            alt="Alexander Stölting"
          /> -->
				<!-- </a> -->
			</div>
		</div>
		<div class="header-right">
			<div class="header-nav-item" class:active={$page.url.pathname === '/'}>
				<a href="/">home</a>
			</div>
			{#if !$page.data.user}
				<div class="header-nav-item" class:active={$page.url.pathname === '/auth/login'}>
					<a href="/auth/login">login</a>
				</div>
				<!-- <div
                    class="header-nav-item"
                    class:active={$page.url.pathname === "/auth/register"}
                >
                    <a href="/auth/register">register</a>
                </div> -->
			{:else}
				<div class="header-nav-item">
					<a href="/auth/about/{$page.data.user.id}">
						<!-- <img
              src={$page.data.user.profile_picture  ? $page.data.user.profile_picture : Avatar}
              alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
            /> -->
						{$page.data.user.first_name}
						{$page.data.user.last_name}
					</a>
				</div>
				{#if $page.data.user.role_id > 0}
					<div
						class="header-nav-item"
						class:active={$page.url.pathname.startsWith('/auth/admin/users')}
					>
						<a href="/auth/admin/users">{$t('user.management')}</a>
					</div>
				{/if}
				<!-- {#if $page.data.user.is_superuser}
          <div
            class="header-nav-item"
            class:active={$page.url.pathname.startsWith("/auth/admin")}
          >
            <a href="/auth/admin">admin</a>
          </div>
        {/if} -->
				<form
					class="header-nav-item"
					action="/auth/logout"
					method="POST"
					use:enhance={async () => {
						return async ({ result }) => {
							await applyAction(result);
						};
					}}
				>
					<button type="submit">logout</button>
				</form>
			{/if}
			<div class="theme-toggle">
				<label class="switch">
					<input type="checkbox" checked={$theme === 'bright'} on:change={toggleTheme} />
					<span class="slider">
						<i class="fas fa-sun"></i>
						<i class="fas fa-moon"></i>
					</span>
				</label>
			</div>
		</div>
	</div>
</header>

<style>
	.theme-toggle {
		display: flex;
		align-items: center;
		margin-left: 20px;
	}

	.switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 30px;
	}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--surface0);
		transition: 0.4s;
		border-radius: 30px;
		padding: 4px;
	}

	.slider:before {
		position: absolute;
		content: '';
		height: 22px;
		width: 22px;
		left: 4px;
		bottom: 4px;
		background-color: var(--text);
		transition: 0.4s;
		border-radius: 50%;
	}

	input:checked + .slider {
		background-color: var(--surface0);
	}

	input:checked + .slider:before {
		transform: translateX(30px);
	}

	.fa-sun,
	.fa-moon {
		position: absolute;
		font-size: 16px;
		top: 7px;
		color: var(--text);
		transition: 0.4s;
	}

	.fa-sun {
		left: 7px;
		opacity: 0;
	}

	.fa-moon {
		right: 7px;
		opacity: 1;
	}

	input:checked + .slider .fa-sun {
		opacity: 1;
	}

	input:checked + .slider .fa-moon {
		opacity: 0;
	}
</style>