Kom igång

@midas-ds/layout är ett modulärt layoutpaket som ersätter Layout från @midas-ds/components. Om du använder det gamla paketet idag så kan du följa migrationsguiden för att gå över till det nya paketet.

Installation

npm install @midas-ds/layout

Importera default.css i roten av din applikation. Denna fil innehåller global CSS som krävs för att layout-komponenterna ska fylla hela viewporten korrekt, bland annat body { margin: 0 } och html { overflow: hidden } för att förhindra att sidans scrollning konkurrerar med layoutens egna scrollbara regioner.

main.tsx
import '@midas-ds/layout/default.css'

index.css
html {
  overflow: hidden;
}

body {
  margin: 0;
}

Översikt

Layoutpaketet innehåller ett antal komponenter som tillsammans används för att bygga upp de sidlayouter som används i våra applikationer.

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`

I skissen nedan visas var på skärmen som komponenterna renderas.

Header

HeaderAction

Navbar

Navigation

NavigationLink

Grundstrukturen

För att bygga en fungerande sida behövs tre grundkomponenter som utgör stommen i ramverket. Genom att kombinera grundstrukturen med övriga komponenter i ramverket är det enkelt att bygga de sidlayouter som passar din applikation.

Layout

Den yttersta wrappern som sätter upp den globala layouten för skärmen. Den ser till att Header hamnar i toppen och om det finns en Navbar så läggs den längst ner på skärmen.

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

<Layout>{/* Header, LayoutContent, Navbar */}</Layout>

LayoutContent

En wrapper som ligger inuti Layout. Den ansvarar för att lägga Sidebar, huvudinnehållet och Panel bredvid varandra.

import { Layout, LayoutContent, Main } from '@midas-ds/layout'

<Layout>
  <LayoutContent>
    <Sidebar>...</Sidebar>
    <Main>...</Main>
  </LayoutContent>
</Layout>

Main

Här läggs sidans huvudinnehåll. Detta renderar ett semantiskt <main>-element.

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

<Main>
  <h1>Rubrik</h1>
  <p>Sidans innehåll</p>
</Main>

Exempel

Här är ett exempel med sidhuvud, sidomeny, huvudinnehåll och navbar. Sidebar och Navbar döljer sig automatiskt beroende på skärmstorlek, så det är säkert att inkludera båda i trädet samtidigt.

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

export const App = () => {
  return (
    <Layout>
      <Header>
        <HeaderLogo />
        <HeaderTitle>Min applikation</HeaderTitle>
        <HeaderActions>
          <HeaderAction icon={<Bell />}>Notiser</HeaderAction>
          <HeaderAction icon={<User />}>Min profil</HeaderAction>
        </HeaderActions>
      </Header>

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

        <Main>{/* Applikationens huvudinnehå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.

Installation​

Översikt​

Grundstrukturen​

Layout​

LayoutContent​

Main​

Exempel​

Exempelapp​