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

Val av applikationslayout

Tabellen nedan beskriver vilken kombination av komponenter som rekommenderas för olika typer av applikationer. Applikationslayouterna ska ses som startpunkter och kan utökas med fler layoutkomponenter när applikationen växer.

Typ av applikation	Rekommenderad layout
Applikation utan huvudnavigation (t.ex. ett formulär)	Endast Header
Applikationen med flera delar, undermenyer eller många navigeringsalternativ	Header & Sidebar
Applikation som främst används på mobil och ska upplevas som en native mobilapp	Header & Navbar

Panel är ett valfritt tillägg i alla layouter. Använd den för sekundärt innehåll, till exempel detaljer, filter eller verktyg som behöver visas bredvid huvudinnehållet.

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änvisar till examples/vite-react-router på GitHub för ett fullständigt exempel på en app som använder vite, react-router, @midas-ds/layout och @midas-ds/components. I repot finns även apps/next, en Next.js-app som är öppen att titta på för inspiration.

Installation​

Översikt​

Val av applikationslayout​

Grundstrukturen​

Layout​

LayoutContent​

Main​

Exempel​

Exempelapp​