Header

Sidhuvudet innehåller logotypen och plats för åtgärdsknappar. På mobil används MobileMenu för att visa navigationen som ett drawer-mönster.

Header

Semantiskt <header>-element. Tillhandahåller kontext för logotypstorlek (responsiv).

import { Header } from '@midas-ds/layout'
import { Logo } from '@midas-ds/components'

<Header>
  <Logo />
</Header>

HeaderActions & HeaderAction

HeaderActions är en container för knappar längst till höger i sidhuvudet. HeaderAction är en enskild knapp med ikon och/eller etikett.

import { Header, HeaderActions, HeaderAction } from '@midas-ds/layout'
import { Bell, User } from 'lucide-react'

<Header>
  <HeaderActions>
    <HeaderAction icon={<Bell />}>Notiser</HeaderAction>
    <HeaderAction icon={<User />}>Min profil</HeaderAction>
  </HeaderActions>
</Header>

HeaderAction renderar som en tertiary-knapp av storlek medium. Om du utelämnar både icon och children får du en varning i development-läge.

MobileMenu

En drawer-meny som bara visas på mobila enheter. Används för att ge mobilanvändare tillgång till navigationen.

import { Header, MobileMenu, Navigation, NavigationItem, NavigationLink } from '@midas-ds/layout'
import { House } from 'lucide-react'

function AppHeader() {
  return (
    <Header>
      <MobileMenu title='Meny'>
        <Navigation>
          <NavigationItem>
            <NavigationLink
              href='/'
              icon={<House />}
              isActive
            >
              Hem
            </NavigationLink>
          </NavigationItem>
        </Navigation>
      </MobileMenu>
    </Header>
  )
}

MobileMenu renderar ingenting på desktop — den är villkorsstyrd via useIsMobileDevice(). Det är alltså säkert att alltid inkludera den i trädet.

Props

HeaderAction

Prop	Typ	Beskrivning
icon	ReactNode	Valfri ikon
children	ReactNode	Etikett
aria-label	string	Krävs om varken ikon eller etikett anges

MobileMenu

Prop	Typ	Beskrivning
title	string	Rubrik i menyn
defaultOpen	boolean	Okontrollerat starttillstånd
isOpen	boolean	Kontrollerat öppet-läge
onOpenChange	(isOpen: boolean) => void	Callback vid öppning/stängning
children	ReactNode	Menyinnehåll