Drawer

A container component that slides in from the left or right. It typically contains menus, search or other content for your app.

Dependencies

The drawer component depends on the following components to be imported:

  • Dialog - Drawers are a container component. You can add any content you'd like but wrapping your content with the dialog component allows for the most flexibility and consistent layouts.
  • Modal - Used for switch functionality. If enabled, drawer items get switched into modals for smaller screens.

drawer

A drawer component is composed of at minimum three elements:

  • drawer: Defines the wrapper which contains a drawer set.
    • drawer__item: The primary component of the drawer functionality. You can have one or many drawer items per drawer component.
    • drawer__main: Defines the main content area that drawers are siblings to. Only one of these should exist per drawer component.

To create a trigger for your drawer, give a link or button the drawer__trigger class along with a [data-target] attribute containing a valid drawer selector as it’s value.

This is the content inside of drawer__main

<button class="drawer__trigger" data-target=".drawer__item">...</button>

<div class="drawer">
  <div class="drawer__item">
    ...
  </div>
  <div class="drawer__main">
    ...
  </div>
</div>

Although you can use any content within a drawer, the dialog component is recommeneded. You’ll just need to add the drawer__dialog element class to the base dialog component.

Dialog Title

This is the dialog body area...

This is the content inside of drawer__main

...
<div class="drawer__item">
  <div class="drawer__dialog dialog">
    <div class="dialog__header">
      ...
    </div>
    <div class="dialog__body">
      ...
    </div>
    <div class="dialog__footer">
      ...
    </div>
  </div>
</div>
...

drawer__item_pos_[location]

Drawer items can slide in from the left or right using the position modifiers:

  • drawer__item_pos_left
  • drawer__item_pos_right

This is the content inside of drawer__main

<div class="drawer">
  <div class="drawer drawer__item_pos_left">
    ...
  </div>
  <div class="drawer drawer__item_pos_right">
    ...
  </div>
  <div class="drawer__main">
    ...
  </div>
</div>

If a position modifier is not provided, the drawer will appear based on it’s location in the DOM relative to the main content area.

Drawer save state

By default the state of your drawers are saved when a unique identifier is provided using the id attribute. States are saved using localStorage.

This is the content inside of drawer__main

<button class="drawer__trigger" data-target="#custom-drawer">...</button>

<div class="drawer">
  <aside id="custom-drawer" class="drawer__item is-active">
    ...
  </aside>
  <div class="drawer__main">
    ...
  </div>
</div>

The default state of a drawer is given by the is-active class in your raw markup. If this class is not present, the default state is closed.

Drawer media switch

Drawer items have the ability to switch between drawer or modal modes by default using the [data-drawer-switch]. The default breakpoint that drawer items get switched is 990px.

This is the content inside of drawer__main

<div class="drawer">
  <aside class="drawer__item" data-drawer-switch>
    ...
  </aside>
  <div class="drawer__main">
    ...
  </div>
</div>

Define the breakpoint that drawers get switched by passing a breakpoint as the [data-drawer-switch] value. Valid breakpoint values are either breakpoint keys as found in src/js/config.json or an explicit pixel value, e.g: "720px", "1200px", etc.

This is the content inside of drawer__main

<div class="drawer">
  <aside class="drawer__item" data-drawer-switch="xl">
    ...
  </aside>
  <aside class="drawer__item" data-drawer-switch="800px">
    ...
  </aside>
  ...
</div>
// Import our drawer component
import Drawer from 'drawer'

// Initialize a drawer instance with a custom default switch breakpoint
const drawer = new Drawer({
  switchBreakpoint: "900px"
})

Usage

// Import our drawer component
import Drawer from 'drawer'

// Initialize a new instance of our drawer component with default settings
const drawer = new Drawer()
Options Description Type Default
classTarget Class used for the target element String 'drawer__item'
classTrigger Class used for the trigger element String 'drawer__trigger'
classInner Class used for the inner component for transitions String 'drawer__dialog'
classTargetSwitch Class that gets switched to on the target element String 'modal'
classTriggerSwitch Class that gets switched to on the trigger element String 'modal__trigger'
classInnerSwitch Class that gets switched to on the inner element String 'modal__dialog'
classActive Class the applied when a drawer is active String 'is-active'
classTransitionNone Class to disable transitions during initial state load String 'transition_none'
saveState Whether or not to enable save state feature Boolean true
switch False to disable switch functionality, or a valid selector String '[data-drawer-switch]'
switchBreakpoint The breakpoint to switch between display modes String 'lg'
transitionDuration Duration in miliseconds that a drawer transitions Milisecond 500

init

The constructor method, run as soon as an instance is created.

@param {Object} options - A json object with your custom settings

drawer.init()
Run

destroy

The deconstructor method, used to reset and destroy the drawer instance.

@param {Boolean} defaultState - Return drawers to their default state?

drawer.destroy()
Run

open

Public method to open a drawer or group of drawers.

@param {String} selector - A valid CSS selector

drawer.open()
Run

close

Public method to close a drawer or group of drawers.

@param {String} selector - A valid CSS selector

drawer.close()
Run

toggle

Public method to toggle a drawer or group of drawers.

@param {String} selector - A valid CSS selector

drawer.toggle()
Run

switchToDrawer

Public method to switch a modal into drawer.

@param {String} selector - A valid CSS selector

drawer.switchToDrawer()
Run

switchToModal

Public method to switch a drawer into modal.

@param {String} selector - A valid CSS selector

drawer.switchToModal()
Run

stateSave

Save the drawer current drawer state.

n/a

drawer.stateSave()
Run

stateClear

Clears drawer state from local storage.

n/a

drawer.stateClear()
Run