refactor: enhance Sidebar layout with fixed header and footer, improve dashboard layout, and implement symbol management features including deletion and data display
This commit is contained in:
@@ -22,43 +22,120 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="drawer lg:drawer-open">
|
||||
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-content flex flex-col items-center">
|
||||
<!-- Page content here -->
|
||||
{@render children?.()}
|
||||
|
||||
<label for="my-drawer-3" class="btn drawer-button lg:hidden">
|
||||
Open drawer
|
||||
<!-- Header Fixo acima de tudo -->
|
||||
<div class="navbar bg-base-200 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-20">
|
||||
<div class="flex-none lg:hidden">
|
||||
<label for="my-drawer-3" class="btn btn-square btn-ghost">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-6 h-6 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div class="drawer-side">
|
||||
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
|
||||
></label>
|
||||
<ul class="menu bg-base-200 min-h-full w-76 p-4 gap-4">
|
||||
<img src={logo} alt="Logo" class="" />
|
||||
<!-- Sidebar content here -->
|
||||
<li class="bg-primary rounded-2xl mt-4">
|
||||
<a href="/">
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
{#each setores as s}
|
||||
<li class="bg-primary rounded-2xl">
|
||||
<a
|
||||
href={s.link}
|
||||
class:active={page.url.pathname === s.link}
|
||||
aria-current={page.url.pathname === s.link ? "page" : undefined}
|
||||
>
|
||||
<span>{s.nome}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="bg-primary rounded-2xl">
|
||||
<a href="/">
|
||||
<span>Solicitar acesso</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<img src={logo} alt="Logo do Governo de PE" class="h-14 lg:h-16 w-auto hidden lg:block" />
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-xl lg:text-3xl font-bold text-primary">SGSE</h1>
|
||||
<p class="text-sm lg:text-base text-base-content/70 hidden sm:block font-medium">
|
||||
Sistema de Gerenciamento da Secretaria de Esportes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer lg:drawer-open" style="margin-top: 80px;">
|
||||
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 80px);">
|
||||
<!-- Page content -->
|
||||
<div class="flex-1">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer footer-center bg-base-200 text-base-content p-6 border-t border-base-300 mt-auto">
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="/" class="link link-hover text-sm">Sobre</a>
|
||||
<a href="/" class="link link-hover text-sm">Contato</a>
|
||||
<a href="/" class="link link-hover text-sm">Suporte</a>
|
||||
<a href="/" class="link link-hover text-sm">Política de Privacidade</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<img src={logo} alt="Logo" class="h-8 w-auto" />
|
||||
<span class="font-semibold">Governo do Estado de Pernambuco</span>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Secretaria de Esportes © {new Date().getFullYear()} - Todos os direitos reservados
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="drawer-side z-40 fixed" style="margin-top: 80px;">
|
||||
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
|
||||
></label>
|
||||
<div class="menu bg-base-200 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-80px)] overflow-y-auto">
|
||||
<!-- Sidebar menu items -->
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="bg-primary rounded-xl">
|
||||
<a href="/" class="font-medium">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||
/>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
{#each setores as s}
|
||||
<li class="bg-primary rounded-xl">
|
||||
<a
|
||||
href={s.link}
|
||||
class:active={page.url.pathname.startsWith(s.link)}
|
||||
aria-current={page.url.pathname.startsWith(s.link) ? "page" : undefined}
|
||||
class="font-medium"
|
||||
>
|
||||
<span>{s.nome}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="bg-primary rounded-xl mt-auto">
|
||||
<a href="/" class="font-medium">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Solicitar acesso</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user