Drawer

Use Drawer for content that opens over the page from the side, such as a mobile menu or a filter panel. For a centred dialog, use Modal.

ExampleCopy Anchor Link

import { useState } from 'react';
import { Drawer } from '@salla.sa/twilight-theme-engine/drawer';
import { Link } from '@salla.sa/twilight-theme-engine/common';

export function MobileMenu() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)} aria-label="Menu">Menu</button>
      <Drawer isOpen={open} onClose={() => setOpen(false)}>
        <Drawer.Header onClose={() => setOpen(false)}>Menu</Drawer.Header>
        <Drawer.Body>
          <Link to="/products" onClick={() => setOpen(false)}>Products</Link>
        </Drawer.Body>
      </Drawer>
    </>
  );
}

You own the open state: the drawer only asks you to close it through onClose.

APICopy Anchor Link

Parts: Drawer.Header, Drawer.Body and Drawer.Footer. Each accepts normal div attributes. Drawer.Header also takes showCloseButton (default true) and onClose.

GotchasCopy Anchor Link

• There is no position prop. The drawer opens on the left in left-to-right themes and on the right when the theme is RTL.
• The close button in Drawer.Header appears only when you pass onClose to the header too.
• It renders nothing while closed and during server rendering, so it never appears in the server HTML.
• While open it adds the class menu-opened to <body>, and on close focus returns to the element that had it before.
• It reads the theme direction, so it must be inside TwilightProvider (your root route already is).

NextCopy Anchor Link

• Modal is the centred dialog with the same props.
• Layout and components