Layout

Beta

@midas-ds/layout är i beta. Paketet är installationsbart och redo att användas, men visuell design och vissa API:er kan förändras innan stabil release.

@midas-ds/layout är ett nytt, modulärt layoutpaket som ersätter Layout från @midas-ds/components. Istället för en enda stor komponent som konfigureras via props sätter du ihop strukturen med mindre, utbytbara komponenter — du väljer vilka delar du behöver.

Struktur

Skissen nedan visar ett exempel på hur komponenterna kan sättas ihop. Vilket upplägg som passar din applikation är upp till dig.

Header

HeaderActions

HeaderAction

HeaderAction

SidebarNavigation

NavigationLink

NavigationLink

NavigationLink

MainPanel

NavbarNavigation

NavigationLink

NavigationLink

NavigationLink

Installation

npm install @midas-ds/layout

Snabbstart

Så här ser ett komplett upplägg ut med sidhuvud, sidomeny, huvudinnehåll och navbar:

import {
  Layout,
  LayoutContent,
  Main,
  Header,
  HeaderActions,
  HeaderAction,
  Sidebar,
  Navigation,
  NavigationItem,
  NavigationLink,
  Navbar,
} from '@midas-ds/layout'
import { House, Settings, Bell, User } from 'lucide-react'

export default function App() {
  return (
    <Layout>
      <Header>
        <HeaderActions>
          <HeaderAction icon={<Bell />}>Notiser</HeaderAction>
          <HeaderAction icon={<User />}>Min profil</HeaderAction>
        </HeaderActions>
      </Header>

      <LayoutContent>
        <Sidebar title='Min applikation'>
          <Navigation>
            <NavigationItem>
              <NavigationLink href='/' icon={<House />} isActive>
                Hem
              </NavigationLink>
            </NavigationItem>
            <NavigationItem>
              <NavigationLink href='/installningar' icon={<Settings />}>
                Inställningar
              </NavigationLink>
            </NavigationItem>
          </Navigation>
        </Sidebar>

        <Main>
          {/* Ditt innehåll */}
        </Main>
      </LayoutContent>

      <Navbar>
        <Navigation>
          <NavigationItem>
            <NavigationLink href='/' icon={<House />} isActive>
              Hem
            </NavigationLink>
          </NavigationItem>
          <NavigationItem>
            <NavigationLink href='/installningar' icon={<Settings />}>
              Inställningar
            </NavigationLink>
          </NavigationItem>
        </Navigation>
      </Navbar>
    </Layout>
  )
}

Exempelapp

Vi håller på att ta fram en fristående exempelapp med Vite som visar paketet i ett realistiskt sammanhang. Under tiden finns apps/next i monorepon — en Next.js-app som använder paketet fullt ut och är öppen att titta på för inspiration.

Next.js / SSR

Vissa komponenter i paketet (bl.a. Header) kräver 'use client' i Next.js App Router. Använd dem i klientkomponenter eller wrappa dem i en egen 'use client'-komponent. Se apps/next för ett fungerande exempel.

Komponenter

Paketet exporterar komponenter organiserade i grupper. Välj de du behöver — du behöver inte använda allt.

Grupp	Komponenter
Layout	Layout, LayoutContent, Main
Header	Header, HeaderActions, HeaderAction, MobileMenu
Navigation	Navigation, NavigationLink, NavigationSection, NavigationSubMenu, NavigationItem, NavigationHeader
Sidebar	Sidebar
Panel	Panel, PanelProvider, PanelBody, usePanels
Navbar	Navbar

Migrera från gamla Layout

Använder du Layout från @midas-ds/components idag? Se migrationsguiden för hur du går över till det nya paketet.