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

feat: add countdown timer and redirect functionality on access denial in MenuProtection component; enhance Sidebar menu item styling and active state handling

Browse Source
This commit is contained in:
deyvisonwanderley
2025-10-27 11:21:23 -03:00
parent 929633492d
commit 42cb78e779
5 changed files with 960 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -11,6 +11,31 @@
let { children }: { children: Snippet } = $props();
const convex = useConvexClient();
// Caminho atual da página
const currentPath = $derived(page.url.pathname);
// Função para gerar classes do menu ativo
function getMenuClasses(isActive: boolean) {
const baseClasses = "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
if (isActive) {
return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
}
return `${baseClasses} border-primary/30 bg-gradient-to-br from-base-100 to-base-200 text-base-content hover:from-primary hover:to-primary/80 hover:text-white`;
}
// Função para gerar classes do botão "Solicitar Acesso"
function getSolicitarClasses(isActive: boolean) {
const baseClasses = "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
if (isActive) {
return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
}
return `${baseClasses} border-success/30 bg-gradient-to-br from-success/10 to-success/20 text-base-content hover:from-success hover:to-success/80 hover:text-white`;
}
const setores = [
{ nome: "Recursos Humanos", link: "/recursos-humanos" },
@@ -251,7 +276,10 @@
<!-- Sidebar menu items -->
<ul class="flex flex-col gap-2">
<li class="rounded-xl">
<a href="/" class="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-primary/30 bg-gradient-to-br from-base-100 to-base-200 hover:from-primary hover:to-primary/80 active:from-primary/90 active:to-primary text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105">
<a
href="/"
class={getMenuClasses(currentPath === "/")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 group-hover:scale-110 transition-transform"
@@ -270,19 +298,22 @@
</a>
</li>
{#each setores as s}
{@const isActive = currentPath.startsWith(s.link)}
<li class="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="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-primary/30 bg-gradient-to-br from-base-100 to-base-200 hover:from-primary hover:to-primary/80 active:from-primary/90 active:to-primary text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105"
aria-current={isActive ? "page" : undefined}
class={getMenuClasses(isActive)}
>
<span>{s.nome}</span>
</a>
</li>
{/each}
<li class="rounded-xl mt-auto">
<a href="/solicitar-acesso" class="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-success/30 bg-gradient-to-br from-success/10 to-success/20 hover:from-success hover:to-success/80 active:from-success/90 active:to-success text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105">
<a
href="/solicitar-acesso"
class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"