Updates to Navbar Account PopOver
This commit is contained in:
parent
792b11248a
commit
cf477b1f25
GPG key ID:
B6983AAA6B9A7A6C
2 changed files with 101 additions and 55 deletions
|
|
@ -2,27 +2,36 @@
|
|||
|
||||
<script lang="ts">
|
||||
import discord from '$lib/images/discord.svg';
|
||||
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';
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import { Exit } from 'radix-icons-svelte';
|
||||
import { CaretDown, CaretRight, Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import * as Popover from '$lib/components/ui/popover';
|
||||
|
||||
let { page } = $props()
|
||||
|
||||
let user = {
|
||||
loggedIn: true, // DEBUG
|
||||
admin: true, // DEBUG
|
||||
type User = {
|
||||
token: string,
|
||||
tokenVisible: boolean,
|
||||
discord: string | undefined,
|
||||
picture: string | undefined,
|
||||
admin: boolean
|
||||
}
|
||||
|
||||
function login() {
|
||||
/*let user: User | undefined = $state({
|
||||
user.loggedIn = true;
|
||||
}
|
||||
tokenVisible: false,
|
||||
discord: "neshura",
|
||||
picture: "/avatar.png",
|
||||
admin: true, // DEBUG
|
||||
})*/
|
||||
|
||||
let user: User | undefined = $state(undefined);
|
||||
|
||||
function logout() {
|
||||
user.loggedIn = false;
|
||||
user = undefined
|
||||
}
|
||||
|
||||
function nextTheme() {
|
||||
|
|
@ -38,6 +47,18 @@
|
|||
|
||||
<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
|
||||
<!-- spacer -->
|
||||
<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>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/"
|
||||
|
|
@ -59,7 +80,7 @@
|
|||
>
|
||||
Archives
|
||||
</Button>
|
||||
{#if user.loggedIn && user.admin}
|
||||
{#if user != undefined && user.admin}
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/admin"
|
||||
|
|
@ -67,64 +88,89 @@
|
|||
>
|
||||
Admin
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/admin/new"
|
||||
class="{$page.url.pathname == '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
|
||||
>
|
||||
Admin (New)
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="dropdown" href="user.loggedIn ? /account | /login"></div>
|
||||
{#if user.loggedIn}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
{#if user != undefined}
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<Button
|
||||
variant="ghost"
|
||||
builders={[builder]}
|
||||
class="relative h-8 w-8 rounded-full"
|
||||
class="relative h-8 w-8 rounded-full align-middle"
|
||||
>
|
||||
<Avatar.Root class="h-8 w-8">
|
||||
<Avatar.Image src="/avatar.png" alt="@user" />
|
||||
<Avatar.Image src={user.picture} 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>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-56 p-0">
|
||||
<div class="w-full p-1">
|
||||
<div class="px-2 py-1.5 font-normal">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
{#if user.tokenVisible}
|
||||
<p class="text-sm font-medium leading-none w-12">{user.token}</p> <!--Make the UserToken hidden by default-->
|
||||
{:else}
|
||||
<p class="text-sm font-medium leading-none w-12">******</p>
|
||||
{/if}
|
||||
<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {user.tokenVisible = !user.tokenVisible}}>
|
||||
{#if user.tokenVisible}
|
||||
<EyeOpen />
|
||||
{:else}
|
||||
<EyeClosed />
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
{#if user.discord}
|
||||
<p class="mt-1 text-xs leading-none text-muted-foreground">@{user.discord}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item href="/profile">
|
||||
</div>
|
||||
<Separator orientation="horizontal" />
|
||||
<div class="w-full p-1">
|
||||
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
|
||||
Profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item href="/settings">
|
||||
</Button>
|
||||
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" 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>
|
||||
</Button>
|
||||
</div>
|
||||
<Separator orientation="horizontal" />
|
||||
<div class="w-full p-1">
|
||||
<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
|
||||
<p>Log out </p>
|
||||
<Exit />
|
||||
</Button>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
{:else}
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="relative"
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="relative"
|
||||
>
|
||||
Log In
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-56 p-1">
|
||||
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
|
||||
Token:
|
||||
|
||||
Log In
|
||||
</Button>
|
||||
<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
|
||||
<p>Sign Up </p>
|
||||
<Exit />
|
||||
</Button>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
{/if}
|
||||
<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