@entur-partner/sidebar

Sidebar component for Entur Partner applications with navigation, user menu, organisation selector, and environment switching.

Installation

npm install @entur-partner/sidebar

Styles

Import the sidebar styles alongside any @entur/* styles your app needs:

@import '@entur-partner/sidebar/styles';

Usage

Use EnturPartnerSidebarLayout for the standard Entur Partner look with built-in user menu items (language toggle, version, profile, cookie settings, logout) and the full page layout. Pass your router's link component so navigation works with your SPA, and place your page content as children:

import { EnturPartnerSidebarLayout } from '@entur-partner/sidebar';
import { Link, useNavigate } from 'react-router';

function App() {
  const navigate = useNavigate();

  return (
    <EnturPartnerSidebarLayout
      user={{
        email: '[email protected]',
        givenName: 'Jan',
        familyName: 'Johansen',
        isEnturUser: true,
      }}
      organisations={[
        { organisationId: 1, tradingName: 'Entur' },
      ]}
      links={[
        {
          label: { 'nb-NO': 'Hjem', 'en-GB': 'Home' },
          path: '/',
          iconName: 'MapIcon',
        },
      ]}
      linkComponent={Link}
      navigate={(to) => navigate(to)}
    >
      <main>
        <h1>Entur Partner</h1>
      </main>
    </EnturPartnerSidebarLayout>
  );
}

EnturPartnerSidebarLayout props

| Prop | Type | Required | Description | |---|---|---|---| | linkComponent | SidebarLinkComponent | Yes | Your router's link component (e.g. React Router's Link). Must accept to, children, className, and onClick props. | | navigate | (to: string) => void | Yes | Called when user menu items need to navigate (e.g. "My profile", "Version"). Should call history.pushState or your router's navigate function. | | user | SidebarUser | No | Current user info. When isEnturUser is true, the environment selector and organisation picker are shown. | | organisations | SidebarOrganisation[] | No | Organisations the user can switch between. Only visible for Entur users. | | links | SidebarLink[] | No | Navigation links shown in the sidebar. | | subItemsPerPath | Record<string, SidebarSubMenuItem[]> | No | Sub-menu items keyed by parent link path. |

Sidebar (base component)

If you need full control over the logo, environment URLs, user menu items, or locale, use the base Sidebar component instead:

| Prop | Type | Required | Description | |---|---|---|---| | environment | Environment | Yes | "local", "development", "staging", or "production". | | environmentUrls | { devUrl: string; stagingUrl: string; prodUrl: string } | Yes | URLs for each environment (used by the environment selector). | | linkComponent | SidebarLinkComponent | Yes | Your router's link component. | | locale | SidebarLocale | Yes | "nb-NO" or "en-GB". | | logoComponent | React.ReactNode | Yes | Logo rendered at the top of the sidebar. | | onOrganisationChange | (organisationId: number) => void | Yes | Called when the user switches organisation. | | organisationId | number \| undefined | Yes | Currently selected organisation ID. | | userMenuItems | SidebarUserMenuItem[] | Yes | Items shown in the user menu dropdown. Each item has label, icon, and onClick. | | subItemsPerPath | Record<string, SidebarSubMenuItem[]> | Yes | Sub-menu items keyed by parent link path. | | user | SidebarUser | No | Current user info. | | organisations | SidebarOrganisation[] | No | Organisations the user can switch between. | | links | SidebarLink[] | No | Navigation links. |

Exports

| Export | Kind | Description | |---|---|---| | EnturPartnerSidebarLayout | Component | Pre-configured sidebar with layout wrapper. Includes the full page layout so consumers don't need @entur/layout/beta directly. | | Sidebar | Component | Base sidebar component for custom configurations. | | SidebarUser | Type | User object shape. | | SidebarOrganisation | Type | Organisation object shape. | | SidebarLink | Type | Navigation link shape. | | SidebarSubMenuItem | Type | Sub-menu item shape (React version, includes navigate). | | SidebarLinkComponent | Type | React component type for the linkComponent prop. | | SidebarLinkComponentProps | Type | Props that linkComponent must accept (to, children, className, onClick). | | SidebarLocale | Type | "nb-NO" \| "en-GB". | | SidebarIconName | Type | Union of allowed icon names. |

CDN usage (no build step)

The package also ships a self-contained IIFE bundle that registers an <entur-partner-layout> custom element. It includes both the sidebar and a layout wrapper with a <slot> for your main content. Load it with a single <script> tag — no framework or build step required. It renders inside a Shadow DOM so its styles are fully encapsulated.

1. Add the script and element

<entur-partner-layout>
  <main>
    <h1>My page content</h1>
  </main>
</entur-partner-layout>

<script src="https://your-cdn.example.com/entur-partner-layout.js"></script>
<script>
  const layout = document.querySelector("entur-partner-layout");

  layout.configure({
    user: {
      email: "[email protected]",
      givenName: "Jan",
      familyName: "Johansen",
      isEnturUser: true,
    },
    organisations: [
      { organisationId: 111, tradingName: "Connect Bus Sørlandsruta" },
      { organisationId: 222, tradingName: "Børselv Taxi" },
    ],
    links: [
      {
        label: { "nb-NO": "Avtaletjenesten", "en-GB": "Agreement Service" },
        iconName: "FeedbackIcon",
        path: "/agreement-service",
      },
      {
        label: { "nb-NO": "Innsikt", "en-GB": "Insights" },
        iconName: "ChartIcon",
        path: "/data-dashboards",
      },
    ],
    onNavigate: (path) => console.log("Navigate to", path),
  });
</script>

The element renders inside a Shadow DOM, so its styles won't leak into or be affected by your page. Child content is projected into the layout's main area via <slot>.

2. Update at runtime

Call configure() again at any time to re-render with new config:

layout.configure({
  links: [/* updated links */],
});

CDN configuration reference

| Property | Type | Description | |---|---|---| | user | SidebarUser | Current user info. | | organisations | SidebarOrganisation[] | Organisations the user can switch between. | | links | SidebarLink[] | Navigation links shown in the sidebar. | | subItemsPerPath | Record<string, CdnSidebarSubMenuItem[]> | Sub-menu items keyed by parent link path. | | onNavigate | (path: string) => void | Called when a link is clicked (for SPA routing). |

CDN sub-menu items differ from the React version. They omit the navigate function since the element handles routing via onNavigate:

type CdnSidebarSubMenuItem = {
  title: string;
  to: string;
  disabled?: boolean;
};

License

EUPL-1.2