fix: stabiliziraj navbar tranziciju i ukloni white splash

Zadrzava Navbar i ostale UI otoke kroz Astro tranzicije te sinkronizira aktivni path preko astro:page-load kako bi react-spring indikator animirao iz trenutne pozicije.

Uklanja bijeli splash pri promjeni stranice i prelasku teme postavljanjem html background boje inline, prilagodbom ThemeToggle logike i uklanjanjem body color tranzicije.

Dodano je i TTL kesiranje za dashboard/task dohvat kako bi se smanjili redundantni API pozivi pri navigaciji.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
2026-07-19 16:18:15 +02:00
parent fe7edf5643
commit bbdd02c9e9
7 changed files with 139 additions and 38 deletions

View File

@@ -40,8 +40,11 @@ const isDev = import.meta.env.DEV;
const preferiraTamno = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (lokalnaTema === 'dark' || (!lokalnaTema && preferiraTamno)) {
document.documentElement.classList.add('dark');
// Postavi pozadinu direktno na html elementu kako bi bila dostupna i prije učitavanja CSS-a
document.documentElement.style.backgroundColor = '#1f2329';
} else {
document.documentElement.classList.remove('dark');
document.documentElement.style.backgroundColor = '#ffffff';
}
}
primijeniTemu();
@@ -49,14 +52,14 @@ const isDev = import.meta.env.DEV;
</script>
</head>
<body class="relative min-h-screen bg-canvas-base text-text-main font-sans antialiased transition-colors duration-300">
<body class="relative min-h-screen bg-canvas-base text-text-main font-sans antialiased">
<div class="absolute inset-0 bg-[linear-gradient(to_right,var(--color-text-main)_0.03_1px,transparent_1px),linear-gradient(to_bottom,var(--color-text-main)_0.03_1px,transparent_1px)] bg-[size:64px_64px] opacity-[0.4] dark:opacity-[0.02] pointer-events-none z-0"></div>
{!isAuthPage && <NetworkGuard client:only="preact" />}
<Toast client:only="preact" />
{!isAuthPage && <NetworkGuard client:only="preact" transition:persist="network-guard" />}
<Toast client:only="preact" transition:persist="toast" />
{!isAuthPage && isDev && <ToastTrigger client:load />}
{!isAuthPage && <Navbar client:load minimal={minimalNav} />}
{!isAuthPage && <TaskCalendarPortal client:only="preact" />}
{!isAuthPage && <Navbar client:only="preact" transition:persist="navbar" minimal={minimalNav} />}
{!isAuthPage && <TaskCalendarPortal client:only="preact" transition:persist="calendar-portal" />}
<div id="main-content" class="relative z-10 flex flex-col min-h-screen max-w-6xl mx-auto px-6 md:px-8 py-6">
<header class="flex flex-row justify-between items-end pb-6 mb-8 border-b border-border-hairline">
@@ -68,7 +71,7 @@ const isDev = import.meta.env.DEV;
</div>
</header>
<main class="flex-1 w-full" transition:animate="fade">
<main class="flex-1 w-full">
<slot />
</main>