mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Add account dropdown
This commit is contained in:
ernstmul
+1
-1
@@ -23,7 +23,7 @@
|
||||
"@appwrite.io/pink": "0.25.0",
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: 1.0.0-next.7
|
||||
version: 1.0.0-next.7(svelte@4.2.19)
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -223,8 +223,8 @@ packages:
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -232,8 +232,8 @@ packages:
|
||||
'@appwrite.io/pink-icons@0.25.0':
|
||||
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4049,15 +4049,15 @@ snapshots:
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons@0.25.0': {}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb(svelte@4.2.19)
|
||||
'@floating-ui/dom': 1.6.12
|
||||
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
|
||||
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
|
||||
|
||||
@@ -1,12 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { Navbar, Icon, Layout, Link, Tooltip } from '@appwrite.io/pink-svelte';
|
||||
import {
|
||||
Navbar,
|
||||
Icon,
|
||||
Layout,
|
||||
Link,
|
||||
Tooltip,
|
||||
Card,
|
||||
ActionList,
|
||||
Input
|
||||
} from '@appwrite.io/pink-svelte';
|
||||
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
|
||||
import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
|
||||
import { IconMenuAlt4, IconSearch } from '@appwrite.io/pink-icons-svelte';
|
||||
import {
|
||||
IconLogoutRight,
|
||||
IconMenuAlt4,
|
||||
IconMode,
|
||||
IconMoon,
|
||||
IconSearch,
|
||||
IconSun,
|
||||
IconUser
|
||||
} from '@appwrite.io/pink-icons-svelte';
|
||||
import { DropList, Support, BreadcrumbsConsole } from '$lib/components';
|
||||
import { Feedback } from '$lib/components/feedback';
|
||||
import { feedback } from '$lib/stores/feedback';
|
||||
import { isMac } from '$lib/helpers/platform';
|
||||
import { base } from '$app/paths';
|
||||
import { logout } from '$lib/helpers/logout';
|
||||
|
||||
let showSupport = false;
|
||||
|
||||
@@ -34,6 +53,7 @@
|
||||
export let avatar: $$Props['avatar'];
|
||||
export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
|
||||
export let showSideNavigation: boolean;
|
||||
let showAccountMenu = false;
|
||||
</script>
|
||||
|
||||
<Navbar.Base {...$$props}>
|
||||
@@ -85,7 +105,41 @@
|
||||
on:click={toggleCommandCenter}><Icon icon={IconSearch} /></Link.Button
|
||||
><span slot="tooltip">{isMac() ? '⌘ + K' : 'Ctrl + K'}</span></Tooltip>
|
||||
</div>
|
||||
<Link.Button><img src={avatar} alt={'Avatar'} class="avatar" /></Link.Button>
|
||||
<Link.Button
|
||||
on:click={() => {
|
||||
showAccountMenu = !showAccountMenu;
|
||||
}}><img src={avatar} alt={'Avatar'} class="avatar" /></Link.Button>
|
||||
{#if showAccountMenu}
|
||||
<div class="account-container">
|
||||
<Card.Base padding="xxs">
|
||||
<Layout.Stack gap="xxs">
|
||||
<ActionList.Root>
|
||||
<ActionList.Item.Anchor
|
||||
icon={IconUser}
|
||||
title="Account"
|
||||
href={`${base}/account`} />
|
||||
|
||||
<ActionList.Item.Button
|
||||
icon={IconLogoutRight}
|
||||
on:click={logout}
|
||||
title="Sign out" />
|
||||
</ActionList.Root>
|
||||
<Input.Select
|
||||
value="light"
|
||||
options={[
|
||||
{ label: 'Light', value: 'light', leadingIcon: IconSun },
|
||||
{ label: 'Dark', value: 'dark', leadingIcon: IconMoon },
|
||||
{ label: 'System', value: 'system', leadingIcon: IconMode }
|
||||
]} />
|
||||
</Layout.Stack>
|
||||
</Card.Base>
|
||||
</div>
|
||||
<div
|
||||
class="account-backdrop"
|
||||
on:click={() => {
|
||||
showAccountMenu = false;
|
||||
}} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Navbar.Base>
|
||||
@@ -157,4 +211,22 @@
|
||||
:global(.icons div:first-of-type) {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.account-container {
|
||||
position: absolute;
|
||||
right: var(--space-7);
|
||||
top: var(--base-44);
|
||||
width: 244px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.account-backdrop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user