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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user