Gå til hovedinnhold
MALER

Portal B2B

beta
@entur/layout/beta
v3.7.0

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 (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.

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. 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.
Se Portal Sidebar B2B for detaljert info.

Template.Portal.Main

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

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

Kollapserbart sidefelt

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.

Installasjon

# Installer den vanlige layout-pakken fra npm
# _ikke_ @entur/layout/beta
npm install @entur/layout

React

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

CSS

@import '@entur/layout/beta/styles';

Kom i gang

import { Template } from "@entur/layout/beta";
{/* ... */}
<Template.Portal>
  <Template.Portal.Sidebar>
    <Template.Portal.Sidebar.Logo>
      {/* Entur produktlogo */}
    </Template.Portal.Sidebar.Logo>
    <Template.Portal.Sidebar.Navigation>
      {/* SideNavigation-komponent */}
    </Template.Portal.Sidebar.Navigation>
  </Template.Portal.Sidebar>
  <Template.Portal.Main>
    {/* Hovedinnhold */}
  </Template.Portal.Main>
</Template.Portal>

Komponenter

Alle komponentene fungerer som slots. Det vil si at de tar imot komponenter og legger de på riktig plass, f.eks logoen.

Alle komponentene støtter også propen as som lar deg endre hvilket HTML-element de faktisk vises som i nettleseren. Se Overskrive standardverdier for mer info.

Under ser du hvordan komponentene for denne malen finnes relativt til hverandre:

Komponenthierarki

Template.Portal
├── Template.Portal.StatusBar   (valgfri — full bredde øverst)
├── Template.Portal.Sidebar
│   ├── Template.Portal.Sidebar.Logo
│   ├── Template.Portal.Sidebar.User
│   ├── Template.Portal.Sidebar.Data
│   ├── Template.Portal.Sidebar.Navigation
│   └── Template.Portal.Sidebar.Footer
└── Template.Portal.Main

Template.Portal

Hoved-wrapper for malen, inneholder ingen visuelle elementer. Template.Portal skal ta hele skjermens størrelse, dvs. høyde på 100dvh og bredde 100dvw. Dette er standard oppførsel, men kan overskrives slik:

Template.Portal.Main

Hovedinnholdsområdet til høyre for sidefeltet. Det er her selve applikasjonsinnholdet skal ligge. Noen av standarverdiene til Main kan overskrives, se Overskrive standardverdier.

Template.Portal.Sidebar

Sidefelt som inneholder all navigasjon, status og innstillinger for portalen som en helhet. Noen av standarverdiene til Sidebar kan overskrives, se Overskrive standardverdier.

Kollapset visning

Sidebar har støtte for å kollapses. Bruk følgende props for å aktivere:

  • collapsed: (boolean) – Kollapset tilstand. Er sidebaren åpen eller kollapset.
  • onCollapseToggle: ((collapsed: boolean) => void) – Callback når sidefeltet toggles. Når denne oppgis, vises en toggle-knapp.
  • openSidebarAriaLabel: (string, standard "Åpne sidemeny") – aria-label for toggle-knappen når sidefeltet er kollapset.
  • closeSidebarAriaLabel: (string, standard "Lukk sidemeny") – aria-label for toggle-knappen når sidefeltet er utvidet.

Template.Portal.Sidebar.Logo

Plass for tjenestens logo. Logoen bør være en lenke som sender bruker tilbake til startsiden for tjenesten.

Template.Portal.Sidebar.User

Plass for informasjon og handlinger for innlogget bruker.

Template.Portal.Sidebar.Data

Plass til datasettvelger, miljøvelger og/eller andre kontekstvelgere. Innhold plasseres under hverandre automatisk med mellomrom.

Template.Portal.Sidebar.Navigation

Hovednavigasjonen i sidefeltet, men til å brukes med SideNavigation. Fyller tilgjengelig plass mellom de andre seksjonene og skroller internt ved overflow.

Template.Portal.Sidebar.Footer

Statisk innhold nederst i sidefeltet, f.eks. støttelenker eller versjonsinfo.

Template.Portal.Statusbar

Brukes til miljøindikator-farge (dev/staging/prod) øverst på siden. Setter ikke farge automatisk per nå, du må selv fylle den med relevant farge til riktig tid.

Overskrive standardverdier

Mange av verdiene i denne malen kan overskrives med CSS-variabler eller as.

For CSS kan du enten sette det via en css-klasse på samme nivå eller høyere enn komponenten, eller ved en inline style. Her er en oversikt over alle overskrivbare variabler:

/* Height/max-height of portal and main area */
--eds-viewport-height: 100dvh;
/* Padding between sidebar and main content */
--eds-portal-main-padding: 1rem;
/* Total width of the sidebar */
--eds-sidebar-width: 20rem;
/* Inside padding in sidebar (does not affect navigation width)
--eds-sidebar-padding: 2rem;

For å endre element som brukes i nettleseren kan du gi inn en HTML-tag til as:

{/* Defautl "as" values */}
<Template.Portal.Main as="main" />
<Template.Portal.Sidebar as="aside" />
<Template.Portal.Sidebar.Navigation as="nav" />
<Template.Portal.Sidebar.Footer as="footer" />

Hvor finner jeg malen?

Du finner malen ved å søke etter "B2B side template" i asset-panelet i Figma, eller via lenken nedenfor. Malen inneholder sidebar, hovedinnhold med 12-kolonners grid, og varianter for dev, staging, prod og lokalt. Se dokumentasjonen i Figma for fullstendig oversikt over elementer og bruksregler.

(Hvis griden ikke vises, trykk ⇧G for å slå den på.)

Se Portal B2B template

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.

Kollapserbart sidefelt

Når sidefeltet er kollapserbart, vises en toggle-knapp med aria-expanded-attributt som indikerer om sidefeltet er åpent eller lukket. Knappen har konfigurerbare aria-labels via openSidebarAriaLabel (standard «Åpne sidemeny») og closeSidebarAriaLabel (standard «Lukk sidemeny»).