This repository has been archived on 2024-08-06. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
chellaris-sign-up-site/src/routes/Header.svelte

73 lines
2.3 KiB
Svelte

<script lang="ts">
import { page } from '$app/stores';
import discord from '$lib/images/discord.svg';
import Settings from './Settings.svelte';
import Button from '$lib/components/Button.svelte';
import NavigationElement from '$lib/components/NavigationElement.svelte';
import { themes } from '$lib/types/themes';
import UserSettingsStore from '$lib/stores/UserSettingsStore';
let showSettings = false;
const openSettings = () => {
// open the settings I guess
}
let user = {
loggedIn: true, // DEBUG
admin: true, // DEBUG
}
function nextTheme() {
if ($UserSettingsStore.themeId + 1 < themes.length) {
$UserSettingsStore.themeId += 1
}
else {
$UserSettingsStore.themeId = 0
}
}
</script>
<div class="flex gap-2 flex-row">
<!-- spacer -->
<ul class="flex gap-2 flex-row">
<NavigationElement href="/">Home</NavigationElement>
<NavigationElement href="/current">Game [Current Game]</NavigationElement>
<NavigationElement href="/archive">Archives</NavigationElement>
{#if user.loggedIn && user.admin}
<NavigationElement href="/admin"></NavigationElement>
{/if}
<div class="dropdown" href="user.loggedIn ? /account | /login"></div>
<Button onclick={nextTheme}>Theme</Button>
<NavigationElement href="/settings">Settings</NavigationElement>
{#if user.loggedIn}
<NavigationElement href="/account">Account</NavigationElement>
{:else}
<NavigationElement href="/login">Login</NavigationElement>
{/if}
</ul>
<!-- spacer -->
<!--padding="px-4 py-2"
justify="justify-center"
rounded="rounded-tr-xl rounded-tl-xl"
border="border-b-2 border-primary-500"
active="variant-glass-primary hover:variant-ghost-primary"
<div aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
<a href="/sign-up">Empire Sign-Up</a>
</div>-->
<!--padding="px-4 py-2"
justify="justify-center"
rounded="rounded-tr-xl rounded-tl-xl"
border="border-b-2 border-primary-500"
active="variant-glass-primary hover:variant-ghost-primary"
hover="hover:variant-ghost-primary"-->
<div class="lightswitch" />
<div>
<!-- Logo -->
<a class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden" href="https://discord.gg/invite/BYNeHaPNh9" target="_blank" rel="noopener noreferrer">
<img width="32px" height="32px" src={discord} alt="Discord" />
</a>
</div>
</div>