Components

AppShell

An application shell with a responsive sidebar.

An application shell: a static sidebar on a wide screen, and a sliding drawer with a header and a hamburger on a narrow one.

Example

src/app/(app)/layout.tsx

import { AppShell } from "@toimetdev/pathlogs-core";

export default function AppLayout({ children }) {
  return (
    <AppShell
      brand={
        <span className="flex items-center gap-2">
          <Logo />
          <span className="text-sm font-bold">PathLogs</span>
        </span>
      }
      menuLabel="Open menu"
      sidebar={<Navigation />}
    >
      {children}
    </AppShell>
  );
}

The sidebar's contents arrive as a prop, whole — the shell does not dictate what navigation looks like.

Responsiveness

The breakpoint is 1024px. Below it a header and a hamburger appear.

Two more small things people usually forget:

clicking any link inside the sidebar closes the drawer — on mobile, navigating always means the menu is no longer wanted;
while the drawer is open, page scrolling beneath it is locked.

Props

Prop	Type	Default	Description
`sidebar`*	`ReactNode`	—	The side menu's contents.
`children`*	`ReactNode`	—	The page contents.
`brand`	`ReactNode`	—	What to show in the mobile header next to the hamburger: a logo, a name.
`menuLabel`	`string`	`"Open menu"`	The accessible name of the hamburger button.

sidebar*ReactNode

The side menu's contents.

children*ReactNode

The page contents.

brandReactNode

What to show in the mobile header next to the hamburger: a logo, a name.

menuLabelstring

defaults to: "Open menu"

The accessible name of the hamburger button.

The sidebar is 15rem wide. If you need a different width, override .pl-shell__sidebar and the inset on .pl-shell__main: both values sit next to each other in components.css.