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();
</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-center">{@render center?.()}</div>
<div class="navbar-end">{@render end?.()}</div>

14
src/routes/+layout.svelte
View file

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

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

@ -5,7 +5,7 @@
import { messages } from '$lib/i18n';
import 'clerk-sveltekit/client';
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 { onMount } from 'svelte';
import type { PageData } from './$types';
@ -65,7 +65,7 @@
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul
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>
<button onclick={() => goto('/app/sms')}>
@ -73,6 +73,12 @@
{messages.nav_menu_sms()}
</button>
</li>
<li>
<button onclick={() => goto('/app/residents')}>
<UsersRound />
{messages.nav_menu_residents()}
</button>
</li>
<li>
<button onclick={() => goto('/app/settings')}>
<Cog />
@ -89,20 +95,24 @@
</div>
{/snippet}
<Navbar>
{#snippet start()}
<Button onclick={() => goto('/app')}>
<h2 class="prose prose-xl">Hestia</h2>
</Button>
{/snippet}
{#snippet center()}
<h1 class="prose prose-2xl">Svelte</h1>
{/snippet}
{#snippet end()}
<div class="flex items-center gap-3">
<p class="prose prose-lg">{message}</p>
{@render userMenu()}
</div>
{/snippet}
</Navbar>
{@render children()}
<div class="flex h-full flex-col items-stretch gap-4">
<Navbar>
{#snippet start()}
<Button onclick={() => goto('/app')} class="rounded-box" color="ghost">
<h2 class="prose prose-xl">Hestia</h2>
</Button>
{/snippet}
{#snippet center()}
<h1 class="prose prose-2xl">Svelte</h1>
{/snippet}
{#snippet end()}
<div class="flex items-center gap-3">
<p class="prose prose-lg">{message}</p>
{@render userMenu()}
</div>
{/snippet}
</Navbar>
<div class="h-full rounded-box bg-base-200 p-8">
{@render children()}
</div>
</div>