SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: enhance layout and component structure for dashboard, including responsive sidebar and header actions, and update footer styling

Browse Source
This commit is contained in:
killer-cf
2025-12-12 16:05:28 -03:00
parent b771322b24
commit 4f238022cf
6 changed files with 350 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/src/lib/components/Header.svelte
View File

@@ -1,20 +1,43 @@
<script lang="ts">
import { resolve } from '$app/paths';
import logo from '$lib/assets/logo_governo_PE.png';
import { page } from '$app/state';
import type { Snippet } from 'svelte';
type HeaderProps = {
left?: Snippet;
right?: Snippet;
};
const { left, right }: HeaderProps = $props();
</script>
<header class="sticky top-0 z-50 w-full border-b backdrop-blur-md bg-base-100/90 border-base-200 shadow-sm transition-all duration-300">
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
<a href="/" class="flex items-center gap-3 group transition-transform hover:scale-[1.02]">
<img src={logo} alt="Logo Governo PE" class="h-10 w-auto object-contain drop-shadow-sm" />
<div class="flex flex-col hidden sm:flex">
<span class="text-xs font-bold text-primary tracking-wider uppercase">Governo de</span>
<span class="text-lg font-extrabold -mt-1 tracking-tight text-base-content leading-none">Pernambuco</span>
</div>
</a>
<header
class="bg-base-200 border-base-100 sticky top-0 z-50 w-full border-b shadow-sm backdrop-blur-md transition-all duration-300"
>
<div class=" flex h-16 w-full items-center justify-between px-4">
<div class="flex items-center gap-3">
{#if left}
{@render left()}
{/if}
<nav class="flex items-center gap-2">
<!-- Links can be added here based on auth state or specific requirements -->
</nav>
<a
href={resolve('/')}
class="group flex items-center gap-3 transition-transform hover:scale-[1.02]"
>
<img src={logo} alt="Logo Governo PE" class="h-10 w-auto object-contain drop-shadow-sm" />
<div class="hidden flex-col sm:flex">
<span class="text-primary text-xs font-bold tracking-wider uppercase">Governo de</span>
<span class="text-base-content -mt-1 text-lg leading-none font-extrabold tracking-tight"
>Pernambuco</span
>
</div>
</a>
</div>
<div class="flex items-center gap-2">
{#if right}
{@render right()}
{/if}
</div>
</div>
</header>