Sidomeny, Kollapsbar meny

Storybook

Sidebar

En kollapsbar sidomeny som visas på desktop. På mobil döljs den automatiskt — använd MobileMenu i Header för mobilnavigering.

Grundläggande användning

import { Sidebar, Navigation, NavigationItem, NavigationLink, NavigationSection } from '@midas-ds/layout'
import { House, Settings } from 'lucide-react'

export default function App() {
  const pathname = usePathname() // or equivalent for your router

  return (
    <Sidebar title='Navigation'>
      <Navigation>
        <NavigationSection>
          <NavigationItem>
            <NavigationLink
              href='/'
              icon={<House />}
              isActive={pathname === '/'}
            >
              Hem
            </NavigationLink>
          </NavigationItem>
          <NavigationItem>
            <NavigationLink
              href='/installningar'
              icon={<Settings />}
              isActive={pathname === '/installningar'}
            >
              Inställningar
            </NavigationLink>
          </NavigationItem>
        </NavigationSection>
      </Navigation>
    </Sidebar>
  )
}

Sektioner

Använd NavigationSection med title-prop för att dela upp navigeringen i namngivna grupper.

<Sidebar title='Navigation'>
  <Navigation>
    <NavigationSection title='Huvudmeny'>
      <NavigationItem>
        <NavigationLink href='/' icon={<House />}>Hem</NavigationLink>
      </NavigationItem>
    </NavigationSection>
    <NavigationSection title='Inställningar'>
      <NavigationItem>
        <NavigationLink href='/konto' icon={<User />}>Konto</NavigationLink>
      </NavigationItem>
      <NavigationItem>
        <NavigationLink href='/system' icon={<Settings />}>System</NavigationLink>
      </NavigationItem>
    </NavigationSection>
  </Navigation>
</Sidebar>

Kollapsläge

Sidomenyn kan kollapsa ihop till enbart ikoner. Det kan styras antingen okontrollerat (internt tillstånd) eller kontrollerat av föräldrakomponenten.

Okontrollerat

<Sidebar
  title='Navigation'
  defaultCollapsed={false}
>
  ...
</Sidebar>

Kontrollerat

const [isCollapsed, setIsCollapsed] = useState(false)

<Sidebar
  title='Navigation'
  isCollapsed={isCollapsed}
  onCollapseChange={setIsCollapsed}
>
  ...
</Sidebar>

Tillgänglighet

Sidomenyn renderas som ett <aside>-landmärke. title används som landmärkets tillgängliga namn — välj ett namn som beskriver menyns syfte, inte applikationens namn.

I kollapsad vy döljs textetiketterna och visas istället som tooltips. Se till att varje NavigationLink alltid har en children-prop så att tooltip och tillgänglig etikett fungerar korrekt.

Props

Sidebar

Prop	Typ	Standard	Beskrivning
title	string	—	Obligatorisk. Namn på sidomenyn, används som tillgängligt landmärkesnamn.
isCollapsed	boolean	—	Kontrollerat kollapsläge
defaultCollapsed	boolean	false	Starttillstånd för okontrollerat läge
onCollapseChange	(isCollapsed: boolean) => void	—	Callback vid kollaps/expansion
children	ReactNode	—	Sidomenysinnehåll (typiskt Navigation)

NavigationSection

Prop	Typ	Standard	Beskrivning
title	string	—	Synlig rubrik för sektionen
children	ReactNode	—	NavigationItem-element