Gå til hovedinnhold
MALER

Portal B2B

beta
@entur/layout/beta
v3.5.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 (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 — Ev. miljøvelger og/eller datasettvelger.
  • Navigation — Hovednavigasjon, ment å brukes med SideNavigation.
  • Footer — Statisk støtteinformasjon nederst.

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

Importer komponenter og stiler

React

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

CSS

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

Grunnleggende bruk

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

Tilpasse HTML-elementer

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

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

Komponenter

Template.Portal

Malen bygges opp av slot-komponenter som plasseres som barn av Template.Portal. Template.Portal skal ta hele skjermens størrelse, dvs. høyde på 100dvh og bredde 100dvw. Alle støtter as-prop for å endre HTML-element.

Template.Portal.Main

Hovedinnholdsområdet til høyre for sidefeltet. Har konfigurerbar padding via CSS-variabelen --eds-portal-main-padding. Rendres som <main>.

Template.Portal.Sidebar

Venstre sidefelt med kontrastfarge som inneholder navigasjon og støtteinformasjon. Har en contrast-prop (standard true) for å slå av/på kontrastbakgrunnen. Rendres som <aside>.

Template.Portal.Sidebar.Logo

Lenker typisk til startsiden.Produktlogo øverst i sidefeltet. Lenker typisk til startsiden.

Template.Portal.Sidebar.User

Viser informasjon om innlogget bruker.

Template.Portal.Sidebar.Data

Plass til datasettvelger eller annen kontekstvelger.

Template.Portal.Sidebar.Navigation

Hovednavigasjonen i sidefeltet. Fyller tilgjengelig plass mellom de andre seksjonene. Rendres som <nav>.

Template.Portal.Sidebar.Footer

Statisk innhold nederst i sidefeltet, f.eks. støttelenker eller versjonsinfo. Rendres som <footer>.

Template.Portal.Statusbar

Valgfri linje som spenner over hele bredden øverst i portalen. Brukes typisk til miljøindikator (dev/staging/prod).

Kollapserbart sidefelt

Sidefeltet kan gjøres kollapserbart for å gi brukeren mer plass til hovedinnholdet. Oppgi collapsed på Template.Portal.Sidebar for å aktivere.

const [isCollapsed, setIsCollapsed] = React.useState(false);

<Template.Portal.Sidebar
  collapsed={isCollapsed}
  onCollapseToggle={setIsCollapsed}
>
  {/* Sidebar-innhold */}
</Template.Portal.Sidebar>

Props for kollapsering

  • collapsed (boolean) — Kollapsert tilstand. Når denne oppgis, vises en toggle-knapp og sidefeltet kan kollapseres.
  • onCollapseToggle ((collapsed: boolean) => void) — Callback når sidefeltet toggles.
  • 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.

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.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»).

Kommer …