Layout

Meny, baslayout, sidomeny, sidhuvud

Storybook

En skalkomponent för att få en simpel sidomeny och sidhuvud.

<Layout
  variant='internal'
  items={[
    {
      items: [
        {
          title: 'Översikt',
          href: '#',
          icon: House,
        },
      ],
    },
    {
      title: 'Ansökan',
      items: [
        {
          title: 'Skapa ansökan',
          href: '#',
          icon: Plus,
        },
        {
          title: 'Beslut',
          href: '#',
          icon: Gavel,
        },
      ],
    },
    {
      title: 'Kort och konto',
      items: [
        {
          title: 'LMA-kort',
          href: '#',
          icon: Calendar,
        },
        {
          title: 'Avvikelser',
          href: '#',
          icon: ClipboardList,
          hasBadge: true,
        },
      ],
    },
  ]}
  title='Skapa ansökningar'
  user={{ name: 'Namn Namnsson', title: 'Roll eller behörighet' }}
  app={{ name: 'Namn på applikationen' }}
  headerChildren={
    <LinkButton
      variant='tertiary'
      target='_blank'
    >
      Öppna annan tjänst
    </LinkButton>
  }
>
  {/* Din applikation */}
</Layout>

Namn Namnsson

Roll eller behörighet

Skapa ansökningar

Öppna annan tjänst

Namn på applikationen

Din applikation

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Layout } from '@midas-ds/components'

Extern variant

Använd variant="external" för en förenklad version av Layout med Navbar i botten av fönstret i mobilt läge.

<Layout
  variant='external'
  items={[
    {
      items: [
        {
          title: 'Översikt',
          href: '#',
          icon: House,
        },
      ],
    },
    {
      title: 'Ansökan',
      items: [
        {
          title: 'Skapa ansökan',
          href: '#',
          icon: Plus,
        },
        {
          title: 'Beslut',
          href: '#',
          icon: Gavel,
        },
      ],
    },
    {
      title: 'Kort och konto',
      items: [
        {
          title: 'LMA-kort',
          href: '#',
          icon: Calendar,
        },
        {
          title: 'Avvikelser',
          href: '#',
          icon: ClipboardList,
          hasBadge: true,
        },
      ],
    },
  ]}
  title='Skapa ansökningar'
  user={{ name: 'Namn Namnsson', title: 'Roll eller behörighet' }}
  app={{ name: 'Namn på applikationen' }}
  headerChildren={
    <LinkButton
      variant='tertiary'
      target='_blank'
    >
      Öppna annan tjänst
    </LinkButton>
  }
>
  {/* Din applikation */}
</Layout>

Namn Namnsson

Roll eller behörighet

Öppna annan tjänst

Namn på applikationen

Din applikation

Separat användning

Det går att importera sidomenyn samt sidhuvudet som separata komponenter om så önskas, det är dock rekommenderat att använda hela Layoutkomponenten.

import { Layout.Header, Layout.Sidebar } from '@midas-ds/components'

Riktlinjer

Kommer snart

API

Name	Type	Default	Description
items *	SidebarLinkGroup[]	-	The menu items/item groups
title *	string	-	Title displayed at the top of the application header
headerChildren	ReactNode	-	List of links in the top right of the application header
user *	SidebarUser	-	Current user details
app *	App	-	Name of the app
clientSideRouter	(path: string, routerOptions: undefined) => void	-	Provide the layout with your router for client side navigation @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/}
clientSideHref	(href: string) => string	-
variant *	"internal" | "external"	-