Layouts - Templates Astro =========================== Layouts réutilisables pour structure commune des pages. **Localisation** : ``frontend/src/layouts/`` Layout.astro ------------ Layout principal de l'application. **Localisation** : ``frontend/src/layouts/Layout.astro`` Structure ^^^^^^^^^ .. code-block:: astro --- import '../styles/global.css'; import '../lib/i18n'; import Navigation from '../components/Navigation.svelte'; interface Props { title: string; showNav?: boolean; } const { title, showNav = true } = Astro.props; --- {title} {showNav && } Props ^^^^^ .. code-block:: typescript interface Props { title: string; // Titre de la page (requis) showNav?: boolean; // Afficher navigation (défaut: true) } Sections ^^^^^^^^ **** : - Meta charset UTF-8 - Meta description (SEO) - Meta viewport (responsive) - Favicon - Title dynamique - **config.js** : Configuration runtime (``window.__ENV__``) **** : - Navigation conditionnelle (``{showNav && }``) - **** : Contenu de la page - Footer avec mentions légales Configuration Runtime ^^^^^^^^^^^^^^^^^^^^^ .. code-block:: html **Attribut is:inline** : Force chargement synchrone avant app Svelte. **public/config.js** (généré par Ansible/Docker) : .. code-block:: javascript window.__ENV__ = { API_URL: "https://api.koprogo.com/api/v1" }; Global CSS ^^^^^^^^^^ .. code-block:: astro import '../styles/global.css'; **frontend/src/styles/global.css** : .. code-block:: css @tailwind base; @tailwind components; @tailwind utilities; @layer components { .btn-primary { @apply bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition; } .card { @apply bg-white rounded-lg shadow p-6; } } i18n Import ^^^^^^^^^^^ .. code-block:: astro import '../lib/i18n'; Initialise svelte-i18n avant chargement composants. Utilisation dans Pages ----------------------- **Page Standard** : .. code-block:: astro --- import Layout from '../layouts/Layout.astro'; import BuildingList from '../components/BuildingList.svelte'; ---

Gestion des Immeubles

**Page sans Navigation** (login) : .. code-block:: astro --- import Layout from '../layouts/Layout.astro'; import LoginForm from '../components/LoginForm.svelte'; --- Layouts Spécialisés (Futurs) ----------------------------- DashboardLayout.astro ^^^^^^^^^^^^^^^^^^^^^ Layout spécifique dashboards avec sidebar. .. code-block:: astro --- import Layout from './Layout.astro'; import Sidebar from '../components/Sidebar.svelte'; interface Props { title: string; role: UserRole; } const { title, role } = Astro.props; ---

**Utilisation** : .. code-block:: astro --- import DashboardLayout from '../layouts/DashboardLayout.astro'; ---

Contenu du dashboard...

AdminLayout.astro ^^^^^^^^^^^^^^^^^ Layout admin avec menu latéral administrateur. PrintLayout.astro ^^^^^^^^^^^^^^^^^ Layout pour impression (rapports PDF). .. code-block:: astro --- interface Props { title: string; } const { title } = Astro.props; --- {title} **Utilisation** : .. code-block:: astro --- import PrintLayout from '../layouts/PrintLayout.astro'; ---

Précompte de Charge Notariale

Nested Layouts -------------- Composer plusieurs layouts. .. code-block:: astro --- // layouts/AdminLayout.astro import Layout from './Layout.astro'; ---

.. code-block:: astro --- // pages/admin/users.astro import AdminLayout from '../../layouts/AdminLayout.astro'; ---

Gestion Utilisateurs

**Résultat** : .. code-block:: text Layout (navigation + footer) └─ AdminLayout (sidebar admin) └─ Page Content (users) Slots Nommés ------------ Pour zones multiples personnalisables. .. code-block:: astro --- // layouts/DashboardLayout.astro interface Props { title: string; } const { title } = Astro.props; ---

**Utilisation** : .. code-block:: astro --- import DashboardLayout from '../layouts/DashboardLayout.astro'; ---

Bienvenue

Immeubles

Head Injection -------------- Injecter meta tags depuis pages. .. code-block:: astro --- // layouts/Layout.astro interface Props { title: string; description?: string; } const { title, description } = Astro.props; --- {title} {description && } **Utilisation** : .. code-block:: astro --- import Layout from '../layouts/Layout.astro'; ---

...

Responsive Design ----------------- Layout adapte automatiquement via Tailwind : .. code-block:: astro

{showNav && }

**Breakpoints Tailwind** : - ``sm:`` : ≥ 640px (mobile) - ``md:`` : ≥ 768px (tablet) - ``lg:`` : ≥ 1024px (desktop) - ``xl:`` : ≥ 1280px (large desktop) Dark Mode (Futur) ----------------- Support thème sombre. .. code-block:: astro --- // layouts/Layout.astro --- .. code-block:: css /* global.css */ @layer base { :root { --color-primary: 59 130 246; /* blue-500 */ } .dark { --color-primary: 96 165 250; /* blue-400 */ } } Performance ----------- **Inlining Critical CSS** : .. code-block:: astro **Preload Fonts** : .. code-block:: astro **Resource Hints** : .. code-block:: astro Tests Layouts ------------- .. code-block:: typescript // tests/e2e/layout.spec.ts import { test, expect } from '@playwright/test'; test('layout should render navigation', async ({ page }) => { await page.goto('/buildings'); // Vérifier navigation await expect(page.locator('nav')).toBeVisible(); // Vérifier footer await expect(page.locator('footer')).toContainText('2025 KoproGo'); }); test('layout should hide navigation on login page', async ({ page }) => { await page.goto('/login'); // Navigation cachée await expect(page.locator('nav')).not.toBeVisible(); }); Références ---------- - Pages : ``frontend/src/pages/`` - Components : ``frontend/src/components/`` - Global CSS : ``frontend/src/styles/global.css`` - Astro Layouts : https://docs.astro.build/en/core-concepts/layouts/