Drawer

SfDrawer is a container that can be anchored to the left, right, top or bottom edge of the screen. This can be used to create things like navigation drawers, sliding cart views, or anything else that needs to stick to the edge of the screen. It also adds additional functionality like closing when the user clicks outside of the drawer or presses the escape key.

Examples

Basic Usage

SfDrawer supports 4 different placements that can be set via placement prop: top, right, bottom, left.

To open/close the drawer, you can use the the open prop and the onClose$ event

By default, SfDrawer will trigger the close event when the user clicks outside of the drawer or presses the escape key. These behaviors can be disabled by setting the disableClickAway and disableEsc props to true.

import type { QwikChangeEvent } from '@builder.io/qwik';
import { $, component$, useSignal } from '@builder.io/qwik';
import type { SfDrawerProps } from 'qwik-storefront-ui';
import { SfButton, SfDrawer, SfDrawerPlacement } from 'qwik-storefront-ui';

export default component$(() => {
  const openSignal = useSignal(false);
  const placementSignal = useSignal<SfDrawerProps['placement']>(
    SfDrawerPlacement.left
  );

  const changePlacement = $((event: QwikChangeEvent<HTMLSelectElement>) => {
    placementSignal.value = event.target.value as SfDrawerProps['placement'];
  });

  return (
    <>
      <label>
        Placement
        <select
          onChange$={changePlacement}
          class="border-2 border-primary-700 mx-2 p-2 rounded"
        >
          <option value="top">top</option>
          <option value="right">right</option>
          <option value="bottom">bottom</option>
          <option value="left">left</option>
        </select>
      </label>
      <SfButton
        onClick$={() => {
          openSignal.value = true;
        }}
        type="button"
      >
        Open Drawer
      </SfButton>

      <SfDrawer
        open={openSignal.value}
        onClose$={$(() => (openSignal.value = false))}
        placement={placementSignal.value}
        class={`bg-neutral-50 p-3 border border-gray-300 
        ${
          placementSignal.value === SfDrawerPlacement.left ||
          placementSignal.value === SfDrawerPlacement.right
            ? 'max-w-[370px]'
            : ''
        }`}
      >
        <div>
          <p class="mb-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
            consequatur repellat, odit voluptatibus deserunt eligendi nemo
            perspiciatis tenetur vero repellendus facere? Dolores sit maiores ut
            labore facilis minima debitis dolore.
          </p>
          <strong>
            You can close Drawer by clicking outside or focus and use ESC button
          </strong>
        </div>
      </SfDrawer>
    </>
  );
});

Drawer transition and trap focus

You can wrap SfDrawer in a <CSSTransition> component to add enter/exit animations.

Additionally, you can use the useTrapFocus utility for better control of focusable elements inside.

import { $, component$, useSignal } from '@builder.io/qwik';
import {
  SfButton,
  SfDrawer,
  SfIconClose,
  SfIconFavorite,
} from 'qwik-storefront-ui';

export default component$(() => {
  const openSignal = useSignal(false);
  const drawerRef = useSignal<Element>();

  // TODO
  // useTrapFocus(drawerRef, { activeState: open });

  return (
    <>
      <SfButton
        onClick$={() => {
          openSignal.value = true;
        }}
        type="button"
      >
        Open Drawer
      </SfButton>

      <transition
        enter-active-class="transition duration-500 ease-in-out"
        leave-active-class="transition duration-500 ease-in-out"
        enter-from-class="-translate-x-full"
        enter-to-class="translate-x-0"
        leave-from-class="translate-x-0"
        leave-to-class="-translate-x-full"
      >
        <SfDrawer
          ref={drawerRef}
          open={openSignal.value}
          onClose$={$(() => (openSignal.value = false))}
          class="bg-neutral-50 border border-gray-300 max-w-[370px]"
        >
          <header class="flex items-center justify-between px-10 py-6 bg-primary-700">
            <div class="flex items-center text-white">
              <SfIconFavorite class="mr-2" /> Your favorite items
            </div>
            <SfButton
              square
              variant="primary"
              onClick$={() => {
                openSignal.value = !openSignal.value;
              }}
              class="text-white"
            >
              <SfIconClose />
            </SfButton>
          </header>
          <div class="p-5 px-10">
            <p class="mb-2">
              Focus is trapped inside this Drawer and <strong>tab</strong>{' '}
              button cycle through{' '}
              <a
                href="https://docs.storefrontui.io/v2/"
                class="underline text-primary-700"
              >
                Focusable Element{' '}
              </a>
              and another{' '}
              <a
                href="https://docs.storefrontui.io/v2/"
                class="underline text-primary-700"
              >
                Focusable Element
              </a>
            </p>
            <strong>
              You can close Drawer by clicking outside or focus and use ESC
              button
            </strong>
          </div>
        </SfDrawer>
      </transition>
    </>
  );
});

Drawer

Examples

Basic Usage

Drawer transition and trap focus

Playground