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>

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: 'Hem',
          href: '#',
          icon: House,
          active: true,
        },
        {
          title: 'Ansökan',
          href: '#',
          icon: Search,
        },
        {
          title: 'Boka',
          href: '#',
          icon: Calendar,
          hasBadge: true,
        },
        {
          title: 'Profil',
          href: '#',
          icon: User,
        },
        {
          title: 'Kontakt',
          href: '#',
          icon: Plus,
        },
      ],
    },
    {
      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>

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