Alex/GoMembership
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add: light theme

Browse Source
This commit is contained in:
Alex
2025-02-18 11:31:01 +01:00
parent 743493517b
commit f1fe64855d
2 changed files with 248 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
frontend/src/lib/components/Header.svelte
View File

@@ -1,68 +1,81 @@
<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";
onMount(() => {
console.log("Page data in Header:", $page);
});
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);
}
$: {
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/">
<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
<!-- </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
{: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}
{$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")}
@@ -70,19 +83,109 @@
<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>
</div>
<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>