pantheon/hestia
2
0
Fork 0
Code Issues 23 Pull requests Projects Releases Packages Wiki Activity Actions

refactor app layout and add residents page

Browse source
This commit is contained in:
Benjamin Palko 2025-02-08 20:19:32 -05:00
parent 4427a37e3e
commit 312e524c54
3 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Navigation/Navbar/Navbar.svelte
View file

@ -4,7 +4,7 @@
let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props(); let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props();
</script> </script>
<header class="navbar justify-between bg-base-200 px-4"> <header class="navbar justify-between rounded-box bg-base-200 px-4">
<div class="navbar-start">{@render start?.()}</div> <div class="navbar-start">{@render start?.()}</div>
<div class="navbar-center">{@render center?.()}</div> <div class="navbar-center">{@render center?.()}</div>
<div class="navbar-end">{@render end?.()}</div> <div class="navbar-end">{@render end?.()}</div>

6
src/routes/+layout.svelte
View file

@ -8,16 +8,16 @@
let { children } = $props(); let { children } = $props();
</script> </script>
<div class="layout">
<ParaglideJS {i18n}> <ParaglideJS {i18n}>
<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}> <ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
<div class="layout">
{@render children()} {@render children()}
</div>
</ClerkProvider> </ClerkProvider>
</ParaglideJS> </ParaglideJS>
</div>
<style> <style>
.layout { .layout {
@apply h-screen w-screen bg-base-100; @apply h-screen w-screen p-8;
} }
</style> </style>

16
src/routes/app/+layout.svelte
View file

@ -5,7 +5,7 @@
import { messages } from '$lib/i18n'; import { messages } from '$lib/i18n';
import 'clerk-sveltekit/client'; import 'clerk-sveltekit/client';
import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte'; import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte';
import { Cog, LogOut, MessageCircleMore } from 'lucide-svelte'; import { Cog, LogOut, MessageCircleMore, UsersRound } from 'lucide-svelte';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
@ -65,7 +65,7 @@
<!-- svelte-ignore a11y_no_noninteractive_tabindex --> <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul <ul
tabindex="0" tabindex="0"
class="menu dropdown-content menu-lg z-[1] mt-4 w-52 rounded-box bg-base-200 p-2 text-right shadow" class="menu dropdown-content menu-lg z-[1] mt-4 w-52 rounded-box border border-neutral bg-base-200 p-2 text-right shadow"
> >
<li> <li>
<button onclick={() => goto('/app/sms')}> <button onclick={() => goto('/app/sms')}>
@ -73,6 +73,12 @@
{messages.nav_menu_sms()} {messages.nav_menu_sms()}
</button> </button>
</li> </li>
<li>
<button onclick={() => goto('/app/residents')}>
<UsersRound />
{messages.nav_menu_residents()}
</button>
</li>
<li> <li>
<button onclick={() => goto('/app/settings')}> <button onclick={() => goto('/app/settings')}>
<Cog /> <Cog />
@ -89,9 +95,10 @@
</div> </div>
{/snippet} {/snippet}
<div class="flex h-full flex-col items-stretch gap-4">
<Navbar> <Navbar>
{#snippet start()} {#snippet start()}
<Button onclick={() => goto('/app')}> <Button onclick={() => goto('/app')} class="rounded-box" color="ghost">
<h2 class="prose prose-xl">Hestia</h2> <h2 class="prose prose-xl">Hestia</h2>
</Button> </Button>
{/snippet} {/snippet}
@ -105,4 +112,7 @@
</div> </div>
{/snippet} {/snippet}
</Navbar> </Navbar>
<div class="h-full rounded-box bg-base-200 p-8">
{@render children()} {@render children()}
</div>
</div>