Sidebar

Sidomeny, Kollapsbar meny

Storybook

Sidopanel som används som huvudnavigation i våra desktopapplikationer. Själva navigationen styrs av navigationskomponenterna Navigation, NavigationItem och NavigationLink.

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>
  )
}

Navigation

Titel

Sidomenyn renderas som ett <aside>-landmärke. title används som landmärkets tillgängliga namn och ska därför vara ett namn som beskriver menyns syfte, inte applikationens namn. Oftast är "Navigation" ett bra alternativ.

Ihopfällt läge

När Sidebar är ihopfälld visas etiketten i NavigationLink som en tooltip vid hover. Därför är det viktigt att varje länk har en children-prop (etikett) eftersom det är nödvändigt för tillgänglighet.

Sidebar kan fällas ihop till enbart ikoner för att användaren ska kunna se mer av huvudinnehållet. 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>

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