79 lines
2.6 KiB
Svelte
79 lines
2.6 KiB
Svelte
<!-- [DEF:frontend.src.routes.+layout:Module] -->
|
|
<!--
|
|
@TIER: STANDARD
|
|
@SEMANTICS: layout, root, navigation, sidebar, toast
|
|
@PURPOSE: Root layout component that provides global UI structure (Sidebar, Navbar, Footer, TaskDrawer, Toasts).
|
|
@LAYER: UI (Layout)
|
|
@RELATION: DEPENDS_ON -> Sidebar
|
|
@RELATION: DEPENDS_ON -> TopNavbar
|
|
@RELATION: DEPENDS_ON -> Footer
|
|
@RELATION: DEPENDS_ON -> Toast
|
|
@RELATION: DEPENDS_ON -> ProtectedRoute
|
|
@RELATION: DEPENDS_ON -> TaskDrawer
|
|
@INVARIANT: All pages except /login are wrapped in ProtectedRoute.
|
|
-->
|
|
|
|
<!-- [DEF:layout:Module] -->
|
|
<!--
|
|
@TIER: STANDARD
|
|
@SEMANTICS: app-layout, auth-gating, navigation-shell
|
|
@PURPOSE: Bind global layout shell and conditional login/full-app rendering.
|
|
@LAYER: UI
|
|
@RELATION: BINDS_TO -> frontend.src.lib.components.layout.Sidebar
|
|
@INVARIANT: Login route bypasses shell; all other routes are wrapped by ProtectedRoute.
|
|
-->
|
|
<script>
|
|
import '../app.css';
|
|
import Navbar from '../components/Navbar.svelte';
|
|
import Footer from '../components/Footer.svelte';
|
|
import Toast from '../components/Toast.svelte';
|
|
import ProtectedRoute from '../components/auth/ProtectedRoute.svelte';
|
|
import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
|
|
import Sidebar from '$lib/components/layout/Sidebar.svelte';
|
|
import TopNavbar from '$lib/components/layout/TopNavbar.svelte';
|
|
import TaskDrawer from '$lib/components/layout/TaskDrawer.svelte';
|
|
import { page } from '$app/stores';
|
|
import { sidebarStore } from '$lib/stores/sidebar.js';
|
|
|
|
$: isLoginPage = $page.url.pathname === '/login';
|
|
$: isExpanded = $sidebarStore?.isExpanded || true;
|
|
</script>
|
|
|
|
<Toast />
|
|
|
|
<main class="bg-gray-50 min-h-screen">
|
|
{#if isLoginPage}
|
|
<div class="p-4">
|
|
<slot />
|
|
</div>
|
|
{:else}
|
|
<ProtectedRoute>
|
|
<!-- Sidebar -->
|
|
<Sidebar />
|
|
|
|
<!-- Main content area with TopNavbar -->
|
|
<div class="flex flex-col min-h-screen {isExpanded ? 'md:ml-60' : 'md:ml-16'} transition-all duration-200">
|
|
<!-- Top Navigation Bar -->
|
|
<TopNavbar />
|
|
<!-- Breadcrumbs -->
|
|
<div class="mt-16 pt-3">
|
|
<Breadcrumbs />
|
|
</div>
|
|
|
|
<!-- Page content -->
|
|
<div class="p-4 flex-grow">
|
|
<slot />
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<Footer />
|
|
</div>
|
|
|
|
<!-- Global Task Drawer -->
|
|
<TaskDrawer />
|
|
</ProtectedRoute>
|
|
{/if}
|
|
</main>
|
|
<!-- [/DEF:layout:Module] -->
|
|
<!-- [/DEF:frontend.src.routes.+layout:Module] -->
|