Gå til hovedinnhold
MALER

Portal B2B

beta
@entur/layout/beta
v3.4.2

Mal for B2B-portaler med valgfri statuslinje, sidefelt og hovedinnhold.

Oversikt

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.

Oppbygning

Template.Portal

Rotkomponenten lager et CSS-grid med to kolonner og full visningshøyde (100vh). Første kolonne er sidefeltet med bredde styrt av --eds-sidebar-width, andre kolonne fyller resten av tilgjengelig plass.

Template.Portal.StatusBar

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.

Template.Portal.Sidebar

Vertikalt fleksområde som rendres som <aside> med kontrastfarge. Inneholder valgfrie seksjoner i rekkefølge:

  • Logo — Produktlogo, lenker typisk til startsiden.
  • User — Brukerindikator med innlogget bruker.
  • Data — Datasettvelger eller kontekstvelger.
  • Navigation — Hovednavigasjon, rendres som <nav>, fyller tilgjengelig plass.
  • Footer — Statisk støtteinformasjon nederst, rendres som <footer>.

Template.Portal.Main

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

Polymorfisme

Alle komponentene støtter as-prop for å endre HTML-element og videresender ref. For eksempel kan Template.Portal.Main rendres som en <section> med as="section".

Når skal malen brukes?

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

Tilpasning

Malen kan tilpasses med følgende CSS-variabler:

  • --eds-sidebar-width — Bredde på sidefeltet (standard 20rem)
  • --eds-sidebar-padding — Padding i sidefeltet (standard 1rem)
  • --eds-portal-main-padding — Padding på hovedinnholdet (standard 1rem)
1.portal {
2  --eds-sidebar-width: 20rem;
3  --eds-sidebar-padding: 1rem;
4  --eds-portal-main-padding: 1rem;
5}

Tilgjengelighet

Malen bruker semantiske HTML-elementer som standard for å sikre god tilgjengelighet:

  • Sidefeltet rendres som <aside> (landmark-rolle complementary)
  • Hovedinnhold rendres som <main> (landmark-rolle main)
  • Navigasjon rendres som <nav> (landmark-rolle navigation)
  • Footer rendres som <footer> (landmark-rolle contentinfo)

Disse elementene gir skjermlesere og andre hjelpeteknologier tydelige landemerker for navigering.

Installasjon

1npm install @entur/layout

Importering

1import { Template } from '@entur/layout/beta';

Grunnleggende bruk

1<Template.Portal>
2  <Template.Portal.Sidebar>
3    <Template.Portal.Sidebar.Logo>
4      ENTUR Produktnavn
5    </Template.Portal.Sidebar.Logo>
6    <Template.Portal.Sidebar.Navigation>
7      <SideNavigation>
8        <SideNavigationItem href="/oversikt">Oversikt</SideNavigationItem>
9        <SideNavigationItem href="/innstillinger">Innstillinger</SideNavigationItem>
10      </SideNavigation>
11    </Template.Portal.Sidebar.Navigation>
12  </Template.Portal.Sidebar>
13  <Template.Portal.Main>
14    {/* Hovedinnhold */}
15  </Template.Portal.Main>
16</Template.Portal>

Med miljøindikator

Legg til Template.Portal.StatusBar som første barn for å vise en miljøindikator øverst i portalen. Alle seksjoner er valgfrie — inkluder bare det du trenger.

1<Template.Portal>
2  <Template.Portal.StatusBar className="env-indicator">
3    Miljø: staging
4  </Template.Portal.StatusBar>
5  <Template.Portal.Sidebar>
6    {/* ... */}
7  </Template.Portal.Sidebar>
8  <Template.Portal.Main>
9    {/* ... */}
10  </Template.Portal.Main>
11</Template.Portal>

Tilpasse HTML-elementer

Bruk as-prop for å endre HTML-element på en hvilken som helst komponent:

1<Template.Portal.Main as="section">
2  {/* Rendres som <section> i stedet for <main> */}
3</Template.Portal.Main>