Hoppa till huvudinnehåll

Mobilorienterade applikationer

Detta mönster är till för applikationer som främst används på mobila enheter och där ska upplevas som native-appar. Det använder Navbar för navigering på små skärmar och Sidebar för navigering på större skärmar. Navbar har endast plats för ett begränsat antal navigeringsalternativ och är därför inte en generell ersättare för MobileMenu på små skärmar.

Mitt system

För att stödja navigation för alla fönster- och skärmstorlekar måste både Navbar och Sidebar inkluderas i trädet. Sidebar och Navbar visas respektive döljs automatiskt vid brytpunkten 640px. För att undvika kodduplicering rekommenderas att lägga navigationsinnehållet i en delad komponent och använda den till Navbar och Sidebar.

Exempelkod​

Exempelkoden visar en applikation med bara en Panel. Om applikationen behöver fler paneler används PanelProvider och usePanels-hooken

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

const NavigationContent = () => (

<Navigation>
  <NavigationItem>
    <NavigationLink
      href='#'
      icon={<House />}
      isActive
    >
      Hem
    </NavigationLink>
  </NavigationItem>
  {/* Fler länkar */}
</Navigation>
)

export const MobileAppSidebarNavbarExample = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <Layout>
      <Header>
        <HeaderLogo />
        <HeaderTitle>Mitt system</HeaderTitle>
        <HeaderActions>
          <HeaderAction icon={<Bell />}>Notifieringar</HeaderAction>
          {/* Fler actions */}
        </HeaderActions>
      </Header>
      <LayoutContent>
        <Sidebar title='Navigation'>
          <NavigationContent />
        </Sidebar>
        <Main>
          <Button onPress={() => setIsOpen(true)}>Öppna panel</Button>
        </Main>
        <Panel
          id='detaljer'
          title='Detaljer'
          isOpen={isOpen}
          onOpenChange={setIsOpen}
        >
          {/* Panelinnehåll */}
        </Panel>
      </LayoutContent>
      <Navbar>
        <NavigationContent />
      </Navbar>
    </Layout>
  )
}