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
src/routes
|
|
@ -2,27 +2,36 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import discord from '$lib/images/discord.svg';
|
import discord from '$lib/images/discord.svg';
|
||||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import { themes } from '$lib/types/themes';
|
import { themes } from '$lib/types/themes';
|
||||||
import UserSettingsStore from '$lib/stores/UserSettingsStore';
|
import UserSettingsStore from '$lib/stores/UserSettingsStore';
|
||||||
import * as Avatar from '$lib/components/ui/avatar';
|
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 { Separator } from '$lib/components/ui/separator';
|
||||||
|
import * as Popover from '$lib/components/ui/popover';
|
||||||
|
|
||||||
let { page } = $props()
|
let { page } = $props()
|
||||||
|
|
||||||
let user = {
|
type User = {
|
||||||
loggedIn: true, // DEBUG
|
token: string,
|
||||||
admin: true, // DEBUG
|
tokenVisible: boolean,
|
||||||
|
discord: string | undefined,
|
||||||
|
picture: string | undefined,
|
||||||
|
admin: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
function login() {
|
/*let user: User | undefined = $state({
|
||||||
user.loggedIn = true;
|
user.loggedIn = true;
|
||||||
}
|
tokenVisible: false,
|
||||||
|
discord: "neshura",
|
||||||
|
picture: "/avatar.png",
|
||||||
|
admin: true, // DEBUG
|
||||||
|
})*/
|
||||||
|
|
||||||
|
let user: User | undefined = $state(undefined);
|
||||||
|
|
||||||
function logout() {
|
function logout() {
|
||||||
user.loggedIn = false;
|
user = undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextTheme() {
|
function nextTheme() {
|
||||||
|
|
@ -38,6 +47,18 @@
|
||||||
|
|
||||||
<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
|
<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
|
||||||
<!-- spacer -->
|
<!-- 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
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/"
|
href="/"
|
||||||
|
|
@ -59,7 +80,7 @@
|
||||||
>
|
>
|
||||||
Archives
|
Archives
|
||||||
</Button>
|
</Button>
|
||||||
{#if user.loggedIn && user.admin}
|
{#if user != undefined && user.admin}
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/admin"
|
href="/admin"
|
||||||
|
|
@ -67,64 +88,89 @@
|
||||||
>
|
>
|
||||||
Admin
|
Admin
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
href="/admin/new"
|
||||||
|
class="{$page.url.pathname == '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
|
||||||
|
>
|
||||||
|
Admin (New)
|
||||||
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="dropdown" href="user.loggedIn ? /account | /login"></div>
|
{#if user != undefined}
|
||||||
{#if user.loggedIn}
|
<Popover.Root>
|
||||||
<DropdownMenu.Root>
|
<Popover.Trigger>
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
builders={[builder]}
|
class="relative h-8 w-8 rounded-full align-middle"
|
||||||
class="relative h-8 w-8 rounded-full"
|
|
||||||
>
|
>
|
||||||
<Avatar.Root class="h-8 w-8">
|
<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.Fallback>US</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenu.Trigger>
|
</Popover.Trigger>
|
||||||
<DropdownMenu.Content class="w-56">
|
<Popover.Content class="w-56 p-0">
|
||||||
<DropdownMenu.Label class="font-normal">
|
<div class="w-full p-1">
|
||||||
<div class="flex flex-col space-y-1 items-start">
|
<div class="px-2 py-1.5 font-normal">
|
||||||
<p class="text-sm font-medium leading-none">User Display</p>
|
<div class="flex flex-row items-center gap-1">
|
||||||
<p class="text-xs leading-none text-muted-foreground">@User</p>
|
{#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>
|
</div>
|
||||||
</DropdownMenu.Label>
|
</div>
|
||||||
<DropdownMenu.Separator />
|
<Separator orientation="horizontal" />
|
||||||
<DropdownMenu.Group>
|
<div class="w-full p-1">
|
||||||
<DropdownMenu.Item href="/profile">
|
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
|
||||||
Profile
|
Profile
|
||||||
</DropdownMenu.Item>
|
</Button>
|
||||||
<DropdownMenu.Item href="/settings">
|
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/settings">
|
||||||
Settings
|
Settings
|
||||||
</DropdownMenu.Item>
|
</Button>
|
||||||
</DropdownMenu.Group>
|
</div>
|
||||||
<DropdownMenu.Separator />
|
<Separator orientation="horizontal" />
|
||||||
<DropdownMenu.Item class="flex flex-row space-x-1" on:click={logout}>
|
<div class="w-full p-1">
|
||||||
<p>Log out </p>
|
<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}>
|
||||||
<Exit />
|
<p>Log out </p>
|
||||||
</DropdownMenu.Item>
|
<Exit />
|
||||||
</DropdownMenu.Content>
|
</Button>
|
||||||
</DropdownMenu.Root>
|
</div>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
{:else}
|
{:else}
|
||||||
<Button
|
<Popover.Root>
|
||||||
variant="ghost"
|
<Popover.Trigger>
|
||||||
class="relative"
|
<Button
|
||||||
>
|
variant="ghost"
|
||||||
Log in
|
class="relative"
|
||||||
</Button>
|
>
|
||||||
|
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}
|
{/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>
|
</div>
|
||||||
<Separator orientation="horizontal"></Separator>
|
<Separator orientation="horizontal"></Separator>
|
||||||
|
|
|
||||||
Reference in a new issue