Skip to content

Commit 52e745c

Browse files
codercatdevcodercatdev
committed
include user in appbar
1 parent 17c5700 commit 52e745c

6 files changed

Lines changed: 80 additions & 19 deletions

File tree

‎apps/codingcatdev/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@cloudinary/html": "^1.11.0",
5555
"@cloudinary/url-gen": "^1.9.1",
5656
"@codingcatdev/videojs-codingcatdev-youtube": "^0.0.2",
57+
"@floating-ui/dom": "^1.2.6",
5758
"firebase": "^9.19.1",
5859
"mdsvex": "^0.10.6",
5960
"prism-svelte": "^0.5.0",

‎apps/codingcatdev/src/routes/(layout-partials)/CcdAppBar.svelte‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
import { Bars3 } from '@steeze-ui/heroicons';
44
55
// BlackCatUI
6-
import { AppBar, LightSwitch, drawerStore, type DrawerSettings } from '@codingcatdev/blackcatui';
6+
import {
7+
AppBar,
8+
drawerStore,
9+
type DrawerSettings,
10+
Avatar,
11+
popup,
12+
LightSwitch
13+
} from '@codingcatdev/blackcatui';
714
import AJAlt from '$lib/components/global/icons/AJAlt.svelte';
815
916
// Drawer Handler
@@ -12,15 +19,15 @@
1219
drawerStore.open(s);
1320
}
1421
15-
import { storeCurrentUrl } from '../(layout-partials)/stores';
22+
import { storeCurrentUrl, storeUser } from '../(layout-partials)/stores';
23+
import LogoutButton from '../login/LogoutButton.svelte';
1624
1725
$: classesActive = (href: string) =>
1826
$storeCurrentUrl?.split('/').at(-1) === href ? 'bg-primary-active-token' : '';
1927
</script>
2028

2129
<!-- NOTE: using stopPropagation to override Chrome for Windows search shortcut -->
2230
<!-- <svelte:window on:keydown|stopPropagation={onWindowKeydown} /> -->
23-
2431
<AppBar shadow="shadow-xl">
2532
<svelte:fragment slot="bcu-app-bar-lead">
2633
<div class="flex items-center gap-2">
@@ -76,17 +83,37 @@
7683
blog
7784
</a>
7885
</div>
79-
<!-- Theme -->
80-
<div>
81-
<LightSwitch />
82-
</div>
83-
84-
<!-- Social -->
85-
<!-- prettier-ignore -->
86-
<!-- <section class="hidden sm:inline-flex sm:gap-2">
87-
<a class="bcu-button-icon hover:variant-soft-primary" href="https://gdggr.org" target="_blank" rel="noreferrer">
88-
<Icon src={GlobeAmericas} theme="solid" />
89-
</a>
90-
</section> -->
86+
{#if $storeUser?.uid}
87+
<button
88+
class="bcu-button hover:variant-soft-primary"
89+
aria-label="Popup Showing Theme Options"
90+
use:popup={{ event: 'click', target: 'theme' }}
91+
>
92+
{#if $storeUser?.picture}
93+
<Avatar class="bcu-avatar-xs w-8 h-4" src={$storeUser.picture} alt="User Photo" />
94+
{:else}
95+
<Avatar class="bcu-avatar-xs w-8 h-8">
96+
<svelte:fragment slot="bcu-avatar-message">
97+
<div class="text-sm">AJ</div>
98+
</svelte:fragment>
99+
</Avatar>
100+
{/if}
101+
</button>
102+
<!-- popup -->
103+
<div class="bcu-card p-4 w-60 shadow-xl" data-popup="theme">
104+
<div class="space-y-4">
105+
<section class="flex justify-between items-center">
106+
<h6>Mode</h6>
107+
<LightSwitch />
108+
</section>
109+
</div>
110+
<div class="flex flex-col gap-2">
111+
<div class="text-sm text-ellipsis">{$storeUser?.email}</div>
112+
<LogoutButton />
113+
</div>
114+
</div>
115+
{:else}
116+
<a class="bcu-button variant-filled-primary" href="/login">Login</a>
117+
{/if}
91118
</svelte:fragment>
92119
</AppBar>

‎apps/codingcatdev/src/routes/(layout-partials)/CcdFooter.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { LightSwitch } from '@codingcatdev/blackcatui';
23
import { Icon } from '@steeze-ui/svelte-icon';
34
import { Github, Twitter, Youtube } from '@steeze-ui/simple-icons';
45
</script>
@@ -10,6 +11,9 @@
1011
<p class="text-xs">
1112
<a class="bcu-button variant-soft" href="https://alexpatterson.dev">Made by Alex Patterson</a>
1213
</p>
14+
<p class="text-xs flex gap-2">
15+
Mode <LightSwitch />
16+
</p>
1317
<div class="flex gap-2">
1418
<a
1519
class="bcu-button variant-soft"

‎apps/codingcatdev/src/routes/(layout-partials)/stores.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,10 @@ import type { Writable } from 'svelte/store';
33

44
// Set within root layout, persists current SvelteKit $page.url.pathname
55
export const storeCurrentUrl: Writable<string | undefined> = writable(undefined);
6+
7+
export interface User {
8+
email?: string;
9+
picture?: string;
10+
uid?: string;
11+
}
12+
export const storeUser: Writable<User | undefined> = writable(undefined);

‎apps/codingcatdev/src/routes/+layout.svelte‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
// Core
66
import { page } from '$app/stores';
77
import { afterNavigate } from '$app/navigation';
8-
import { storeCurrentUrl } from './(layout-partials)/stores';
8+
import { storeCurrentUrl, storeUser } from './(layout-partials)/stores';
99
1010
//Style
1111
import '../app.postcss';
1212
1313
// BlackCatUI Components
14-
import { AppShell, Modal, Toast } from '@codingcatdev/blackcatui';
14+
import { AppShell, Modal, Toast, storePopup } from '@codingcatdev/blackcatui';
15+
16+
// Depedency: Floating UI
17+
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
18+
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
1519
1620
// CodingCat.Dev Components
1721
import CcdAppBar from './(layout-partials)/CcdAppBar.svelte';
@@ -27,6 +31,12 @@
2731
2832
// Lifecycle
2933
afterNavigate((params: any) => {
34+
storeUser.set({
35+
email: data.user?.email,
36+
picture: data.user?.picture,
37+
uid: data.user?.uid
38+
});
39+
3040
// Store current page route URL
3141
storeCurrentUrl.set($page.url.pathname);
3242
// Scroll to top

‎pnpm-lock.yaml‎

Lines changed: 14 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)