61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { resolve } from '$app/paths';
|
|
import logo from '$lib/assets/logo_governo_PE.png';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
type HeaderProps = {
|
|
left?: Snippet;
|
|
right?: Snippet;
|
|
};
|
|
|
|
const { left, right }: HeaderProps = $props();
|
|
</script>
|
|
|
|
<header
|
|
class="bg-base-200 border-base-100 sticky top-0 z-50 w-full border-b py-3 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}
|
|
|
|
<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-2xl font-bold tracking-wider uppercase">SGSE</span>
|
|
<span class="text-base-content -mt-1 text-lg leading-none font-extrabold tracking-tight"
|
|
>Sistema de Gestão da Secretaria de Esportes</span
|
|
>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<select
|
|
class="select select-sm bg-base-100 border-base-300 w-40"
|
|
aria-label="Selecionar tema"
|
|
data-choose-theme
|
|
>
|
|
<option value="aqua">Aqua</option>
|
|
<option value="sgse-blue">Azul</option>
|
|
<option value="sgse-green">Verde</option>
|
|
<option value="sgse-orange">Laranja</option>
|
|
<option value="sgse-red">Vermelho</option>
|
|
<option value="sgse-pink">Rosa</option>
|
|
<option value="sgse-teal">Verde-água</option>
|
|
<option value="sgse-corporate">Corporativo</option>
|
|
<option value="light">Claro</option>
|
|
<option value="dark">Escuro</option>
|
|
</select>
|
|
|
|
{#if right}
|
|
{@render right()}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</header>
|