Portal

Template.Portal er en ferdig mal for B2B-portaler. Den gir en todelt layout med fast sidefelt til venstre og hovedinnhold til høyre, samt en valgfri statuslinje øverst. Malen dekker det typiske grunnoppsettet i Enturs B2B-produkter og er designet for å brukes sammen med SideNavigation fra @entur/menu.

Rotkomponenten lager et CSS-grid med to kolonner og full visningshøyde (100dvh). Høyden kan overstyres med CSS-variabelen --eds-viewport-height, f.eks. om portalen ikke skal fylle hele skjermen. Første kolonne er sidefeltet med bredde styrt av --eds-sidebar-width, andre kolonne fyller resten av tilgjengelig plass.

Valgfri seksjon som spenner over hele bredden øverst i portalen, over både sidefelt og hovedinnhold. Brukes typisk til miljøindikator som viser om brukeren er i dev, staging eller produksjon.

Vertikalt fleksområde som rendres som <aside> med kontrastfarge. Sidefeltet er festet til toppen av viewporten og begrenses til viewport-høyden, slik at langt innhold scroller internt i stedet for å dytte hele siden nedover. Inneholder valgfrie seksjoner i rekkefølge:

• Logo — Produktlogo, lenker typisk til startsiden.
• User — Brukerindikator med innlogget bruker.
• Data — Ev. datasettvelger og/eller datasettvelger. Rendres som en flekskolonne med automatisk mellomrom mellom barn-elementer.
• Navigation — Hovednavigasjon, ment å brukes med SideNavigation. Fyller tilgjengelig plass og scroller internt ved overflow.
• Footer — Statisk støtteinformasjon nederst.

Hovedinnholdsområdet som rendres som <main>. Spenner fra andre kolonne til slutten av gridet og har konfigurerbar padding.

Bruk Template.Portal i:

• B2B-verktøy og produkter med sidebar-navigasjon
• Løsninger med fast sidenavigasjon og skiftende hovedinnhold
• Produkter som trenger miljøindikator, brukerinfo og/eller datasettvelger i sidefeltet

Unngå malen når:

• Løsningen har få navigasjonselementer (færre enn 5) — vurder topbar i stedet
• Siden er en enkel landingsside uten behov for persistent navigasjon

Sidefeltet kan gjøres kollapserbart ved å sette collapsed-propen. Dette lar brukeren minimere sidefeltet for å gi mer plass til hovedinnholdet. En toggle-knapp vises automatisk på kanten av sidefeltet.

Om sidebaren er åpen eller kollapset må du kontrollere — du styrer tilstanden via collapsed og onCollapseToggle.