Sidhuvud, Applikationshuvud

Storybook

Header

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

Grundläggande exempel

Mitt system

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

<Header>
  <HeaderLogo />
  <HeaderTitle>Mitt system</HeaderTitle>
  <HeaderActions>
    <HeaderAction icon={<Bell size={20} />}>Notiser</HeaderAction>
    <HeaderAction icon={<User size={20} />}>Min profil</HeaderAction>
    <HeaderAction icon={<Settings size={20} />}>Inställningar</HeaderAction>
  </HeaderActions>
</Header>

Med MobileMenu

På smala skärmar (≤ 640px) döljs sidomenyn. Lägg till MobileMenu i headern så att mobilanvändare ändå kan nå navigationen.

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

<Header>
  <MobileMenu title='Mitt system'>
    <Navigation>
      <NavigationItem>
        <NavigationLink href='/' icon={<House />} isActive>Hem</NavigationLink>
      </NavigationItem>
    </Navigation>
  </MobileMenu>
  <HeaderLogo />
  <HeaderTitle>Mitt system</HeaderTitle>
  <HeaderActions>
    <HeaderAction icon={<Bell size={20} />}>Notiser</HeaderAction>
  </HeaderActions>
</Header>

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

Overflow-meny för många åtgärder

HeaderActions hanterar inte overflow automatiskt. När din app har många åtgärder och du vill dölja några i en meny på smala skärmar, löser du det med en mediaquery. Det ger full kontroll — rätt breakpoint beror på kombinationen av systemnamn, logotyp och antal knappar.

Prova att ändra bredden på fönstret nedan för att se beteendet:

Mitt system

import { useMediaQuery } from '@react-spectrum/utils'
import { Menu, MenuItem, MenuPopover, MenuTrigger } from '@midas-ds/components'
import { Bell, MoreHorizontal, Settings, User } from 'lucide-react'

const collapsibleActions = [
  { id: 'profile', label: 'Min profil', icon: <User size={20} /> },
  { id: 'settings', label: 'Inställningar', icon: <Settings size={20} /> },
]

function AppHeader() {
  // Välj den breakpoint som passar din app
  const isNarrow = useMediaQuery('(max-width: 700px)')

  return (
    <Header>
      <HeaderActions>
        <HeaderAction icon={<Bell size={20} />}>Notiser</HeaderAction>
        {isNarrow ? (
          <MenuTrigger>
            <HeaderAction aria-label='Fler alternativ' icon={<MoreHorizontal size={20} />} />
            <MenuPopover>
              <Menu>
                {collapsibleActions.map(action => (
                  <MenuItem key={action.id} id={action.id}>
                    {action.label}
                  </MenuItem>
                ))}
              </Menu>
            </MenuPopover>
          </MenuTrigger>
        ) : (
          collapsibleActions.map(action => (
            <HeaderAction key={action.id} icon={action.icon}>
              {action.label}
            </HeaderAction>
          ))
        )}
      </HeaderActions>
    </Header>
  )
}

HeaderLogo

Hanterar responsiv logotyp automatiskt — visar ikonversionen (x-small) på mobil och den fullständiga logotypen (small) på desktop.

import { HeaderLogo } from '@midas-ds/layout'

<HeaderLogo />

Stöder primary-prop från Logo för att byta till monokrom variant:

<HeaderLogo primary={false} />

Vill du länka logotypen till startsidan, wrappa den i din routing-komponent:

// Vanilla HTML
<a href='/'><HeaderLogo /></a>

// Next.js
import Link from 'next/link'
<Link href='/'><HeaderLogo /></Link>

// React Router
import { Link } from 'react-router-dom'
<Link to='/'><HeaderLogo /></Link>

Props

HeaderAction

Prop	Typ	Beskrivning
icon	ReactNode	Valfri ikon
children	ReactNode	Etikett — visas på desktop, döljs som sr-only på mobil
aria-label	string	Alternativt om children inte används

HeaderTitle

Prop	Typ	Beskrivning
children	ReactNode	Systemnamnet
className	string	Extra CSS-klass

HeaderLogo

Prop	Typ	Standard	Beskrivning
primary	boolean	true	Monokrom variant om false

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