Layouts

De frontend layouts zijn opgebouwd in lagen. Dit document beschrijft ze chronologisch: van het fundament (BaseLayout) naar de entry experience (LoginLayout), de huidige standaard (DashboardLayout) en de legacy variant (ProjectLayout).

`<BaseLayout />`

Bestand: BaseLayout.astro
Rol: levert de HTML-structuur, SEO-meta, globale styling en Alpine.js bootstrap.
Belangrijkste dependencies: global.css, formatPageTitle() uit lib/utils/strings, VersionCheck.astro.
Props: biedt een <body {...props}> element waarin eventuele benodigde atributen kunnen worden doorgegeven.
Automatische titel: de formatPageTitle(Astro.url.pathname) genereerd automatisch een titel conform het patroon: "VEMAP | {pageTitle}".

Voorbeeld

<BaseLayout>
  <div
    class="min-h-screen bg-map-blue text-gray-50 w-full flex items-center justify-center flex-col relative"
  >
    <main class="w-full flex items-center justify-center">
      <slot />
    </main>
  </div>
</BaseLayout>

Alle andere layouts wrappen hun content in BaseLayout om consistente metadata en styling te behouden.

`<LoginLayout />`

Bestand: LoginLayout.astro
Gebruikt sinds: introductie van de login/reset/challenge pagina’s.
Wrapt: BaseLayout en zet een minimalistische full-height container neer voor auth forms.
Prop: pageTitle (default Login) → bepaalt <title> en headertekst.
Token hygiene: inline script verwijdert tokenExp uit localStorage zodra de pagina laadt.

Voorbeeld

De <LoginLayout /> wordt gebruikt op de pagina’s:

/login
/login/nieuw-wachtwoord
/login/wachtwoord-vergeten
/login/wachtwoord-reset

<LoginLayout>
  <ForgotPasswordForm />
</LoginLayout>

`<DashboardLayout />`

Bestand: DashboardLayout.astro
Rol: standaard layout voor alle applicatiepagina’s na login.
Wrapt: BaseLayout.
Belangrijkste onderdelen:
- SidebarNav.astro (vast links, 5rem breed vanaf lg)
- Header.astro (4rem hoog, sticky)
Slot: main-content (vereist) – bevat de pagina-inhoud.

Voorbeeld

<DashboardLayout>
  <div
    class="h-[calc(100vh-10rem)] lg:h-[calc(100vh-7rem)] grid grid-rows-[auto_1fr] gap-4 p-4 pb-0"
    x-data="tabs()"
    slot="main-content"
  >
    <div class="min-h-0 overflow-hidden">
      {hasRole(user, ROLES.ADMIN) && <AdminDashboard />}
      {hasRole(user, ROLES.ORGANISATION) && <OrganisationDashboard />}
      {hasRole(user, ROLES.MANAGER) && <ManagerDashboard />}
      {hasRole(user, ROLES.STAKEHOLDER) && <StakeholderDashboard />}
    </div>
  </div>
</DashboardLayout>

`<ProjectLayout />`

Bestand: ProjectLayout.astro
Status: actief voor dynamische pagina’s waar breadcrumbs uit de slug opgebouwd moeten worden (bijv. /projectbeheer/[project]/[afsluiting]).
Wrapt: BaseLayout, maar met oudere versies van sidebar/header/notification componenten.
Props: title (default "VEMAP") → <title>VEMAP | {title}</title>.
Slots:
- main-content (vereist) - hoofdinhoud.
- modal-content (optioneel) - modals die buiten de DOM-flow moeten hangen.

Voorbeeld

<ProjectLayout title={project ?? "Project"} data-page="project">
  <div slot="main-content" class="overflow-y-auto h-full w-full relative">
    <ClosuresPreviewList />
    <BreadCrumbs />
    <Slideover>
      <ClosureCreate />
    </Slideover>
  </div>
</ProjectLayout>

Samenvattende chronologie

Fase	Layout	Doel	Status
1	`BaseLayout`	SEO, metadata, body wrapper	Actief
2	`LoginLayout`	Auth-flow container	Actief
3	`DashboardLayout`	Hoofdapplicatie met navigatie	Actief
4	`ProjectLayout`	Dynamische pagina’s (incl. breadcrumbs)	Actief