Reworked Navbar to use shadcn
This commit is contained in:
parent
69574ae124
commit
17e52b12d0
GPG key ID:
B6983AAA6B9A7A6C
4 changed files with 104 additions and 59 deletions
|
|
@ -1,8 +0,0 @@
|
|||
<script lang="ts">
|
||||
let {href} = $props()
|
||||
// {$page.url.pathname === '/'}
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<a {href}><slot /></a>
|
||||
</li>
|
||||
|
|
@ -38,15 +38,9 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="
|
||||
bg-{themes[$UserSettingsStore.themeId].backgroundColor}
|
||||
text-{themes[$UserSettingsStore.themeId].textColor}
|
||||
h-full" >
|
||||
<div class="h-full" >
|
||||
<Header/>
|
||||
<slot />
|
||||
<!-- (sidebarLeft) -->
|
||||
<!-- (sidebarRight) -->
|
||||
<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
|
||||
<!-- Router Slot -->
|
||||
<!-- ---- / ---- -->
|
||||
<!-- (pageFooter) -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<div class="container h-full mx-auto flex flex-col justify-center items-center">
|
||||
<svelte:head>
|
||||
<title>Home</title>
|
||||
<meta name="description" content="Landing Page for the Chellaris Multiplayer Group" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container py-2 h-full mx-auto flex flex-col justify-center items-center">
|
||||
<h1>Chellaris</h1>
|
||||
<div class="space-y-5">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
<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 * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { themes } from '$lib/types/themes';
|
||||
import UserSettingsStore from '$lib/stores/UserSettingsStore';
|
||||
|
||||
let showSettings = false;
|
||||
|
||||
const openSettings = () => {
|
||||
// open the settings I guess
|
||||
}
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import { Exit } from 'radix-icons-svelte';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
|
||||
let user = {
|
||||
loggedIn: true, // DEBUG
|
||||
admin: true, // DEBUG
|
||||
}
|
||||
|
||||
function login() {
|
||||
user.loggedIn = true;
|
||||
}
|
||||
|
||||
function logout() {
|
||||
user.loggedIn = false;
|
||||
}
|
||||
|
||||
function nextTheme() {
|
||||
if ($UserSettingsStore.themeId + 1 < themes.length) {
|
||||
$UserSettingsStore.themeId += 1
|
||||
|
|
@ -29,45 +33,95 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 flex-row">
|
||||
<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
|
||||
<!-- spacer -->
|
||||
<ul class="flex gap-2 flex-row">
|
||||
<NavigationElement href="/">Home</NavigationElement>
|
||||
<NavigationElement href="/current">Game [Current Game]</NavigationElement>
|
||||
<NavigationElement href="/archive">Archives</NavigationElement>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/"
|
||||
class="{$page.url.pathname == '/' ? 'text-accent-foreground bg-accent' : ''}"
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/current"
|
||||
class="{$page.url.pathname == '/current' ? 'text-accent-foreground bg-accent' : ''}"
|
||||
>
|
||||
Game [Current Game]
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/archive"
|
||||
class="{$page.url.pathname.startsWith('/archive') ? 'text-accent-foreground bg-accent' : ''}"
|
||||
>
|
||||
Archives
|
||||
</Button>
|
||||
{#if user.loggedIn && user.admin}
|
||||
<NavigationElement href="/admin"></NavigationElement>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/admin"
|
||||
class="{$page.url.pathname == '/admin' ? 'text-accent-foreground bg-accent' : ''}"
|
||||
>
|
||||
Admin
|
||||
</Button>
|
||||
{/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>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
variant="ghost"
|
||||
builders={[builder]}
|
||||
class="relative h-8 w-8 rounded-full"
|
||||
>
|
||||
<Avatar.Root class="h-8 w-8">
|
||||
<Avatar.Image src="/avatar.png" alt="@user" />
|
||||
<Avatar.Fallback>US</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
<DropdownMenu.Label class="font-normal">
|
||||
<div class="flex flex-col space-y-1 items-start">
|
||||
<p class="text-sm font-medium leading-none">User Display</p>
|
||||
<p class="text-xs leading-none text-muted-foreground">@User</p>
|
||||
</div>
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item href="/profile">
|
||||
Profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item href="/settings">
|
||||
Settings
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item class="flex flex-row space-x-1" on:click={logout}>
|
||||
<p>Log out </p>
|
||||
<Exit />
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
{:else}
|
||||
<NavigationElement href="/login">Login</NavigationElement>
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="relative"
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
{/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>
|
||||
<Button
|
||||
variant="link"
|
||||
href="https://discord.gg/invite/BYNeHaPNh9"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="h-8 w-8 items-center flex"
|
||||
>
|
||||
<Avatar.Root class="h-6 w-6">
|
||||
<Avatar.Image src={discord} alt="DC" />
|
||||
<Avatar.Fallback>US</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Button>
|
||||
</div>
|
||||
<Separator orientation="horizontal"></Separator>
|
||||
|
|
|
|||
Reference in a new issue