Drawer

Drawer provides access to an elevated surface providing additional app functionality such as filtering items, account access or displaying search results.

Example

A Drawer can be created via Frontbx's Container with the Drawer method:

const drawer = frontbx.Drawer({
    content : '<ul>...</ul>',
});

Direction

Drawer direction can be manged by passing left|right|top|bottom to direction in the options.

const drawer = frontbx.Drawer({
    content : '<ul>...</ul>',
    direction: 'right'
});

Swipeable

By default, the Drawer element itself is Swipeable when expanded - meaning once it's opened, it can be swiped closed by swiping on the drawer in the opposite direction.

You can make the drawer swipeable on the window element itself instead by adding the swipeable option. This means a drawer can opened or closed by simply swiping up/down/left/right on the window itself at any time.

const drawer = frontbx.Drawer({
    content   : '...',
    swipeable : true
});

Persistent

Persistent navigation drawers can toggle open or closed and sits on the same surface elevation as the content. When the drawer opens or closes, the main page content is pushed or pulled adapts in width/height based on the drawer size.

Drawer will automatically wrap and unwrap page content when the it is invoked or destroyed.

const drawer = frontbx.Drawer({
    content    : '...',
    persistent : true,
});

Pushbody

Enabling pushbody on persistent drawers, pushes the body content rather than allowing it to adapt in size, this is a great option for situations where you want to target both mobile and desktop

When the drawer opens or closes, the main page content is pushed or pulled adapts in width/height based on the drawer size.

Drawer will automatically wrap and unwrap page content when the it is invoked or destroyed.

const drawer = frontbx.Drawer({
    content    : '...',
    persistent : true,
});

Peekable

On persistent left and right drawers, adding the peekable option, allows the drawer to collapse into a fixed width when closed. When expanded, it appears as the standard persistent navigation drawer.

const drawer = frontbx.Drawer({
    content   : '...',
    persistent : true,
    peekable : true,
});

Methods

Once a drawer instance is created, there are a few methods to interact with the drawer:

The open method will animate and open the drawer:

drawer.open();

The close method will animate and close the drawer:

drawer.close();

The direction method returns the drawer state which will be either left, right, top or bottom:

if (drawer.direction() === 'left')
{

}

The state method returns the drawer state which will be either collapsed or expanded:

if (drawer.state() === 'collapsed')
{

}

The opened method returns true if the drawer is open or false if not

if (drawer.opened())
{

}

The closed method returns true if the drawer is closed or false if not

if (drawer.closed())
{

}

Finally the destroy method completely removes the drawer from the DOM and all related event listeners:

drawer.destroy()

Options

Drawer initialization has a number of different options depending on the use-case. The table below outlines the available options:

Option key Var Type Behavior Required Default
content string array nodelist HTMLElement Content to be displayed inside the drawer no null
persistent Boolean Enables persistent drawer. no false
peekable Boolean Enables peekable drawer. no false
animateOnMount Boolean Enables animating on initial mount. Defaults to true when state is expanded no false
swipeable boolean Enables swipes on the window to open/close drawer no false
state string Default state when first created can be either collapsed or expanded no expanded
overlay string Either light or dark no dark
easing string JavaScript easing pattern in camelCase no easeOut
animationTime Integer Animation duration in milliseconds. no 250
classes string Additional classes to pass to the drawer wrapper no dark
callbackBuilt function Callback function to be called when drawer is first built but not rendered. no null
callbackRender function Callback function to be called when drawer is first rendered into DOM. no null
callbackOpen function Callback function to be called when drawer is opened. no null
callbackClose function Callback function to be called when drawer is closed. no null
callbackValidate function Callback function to validate if drawer can be closed. Must return boolean no null

Note that all callbacks callbacks will receive the following arguments: containerWrap, drawer, overlay, bodyWrap

HTML Initialization

For basic use cases where access to the underlying JavaScript, Drawers can be enabled through HTML markup via an anchor element. Options can be set through data-attributes on the anchor element.

To initialize a drawer, create an anchor element using the .js-drawer-trigger class, you can then point to the id of the target drawer element in the DOM via the data-content attribute. No other special markup is required.

<button type="button" class="btn js-drawer-trigger" data-content="#my-drawer">Toggle</button>

<ul class="memu" id="my-drawer">...</ul>

CSS Customization

Drawer use a combination of both local CSS variables and Sass variables on .drawer-wrap, .drawer-overlay for enhanced component customization and styling.

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss
$drawer-bg:                     var(--fbx-white) !default;
$drawer-width:                  230px !default;
$drawer-size-peekable:          80px !default;
$drawer-overlay-bg:             rgba(255, 255, 255, 0.8) !default;
$drawer-overlay-bg-dark:        rgba(0, 0, 0, 0.5) !default;
scss/components/_drawer.scss
.drawer-container
{
    // Variables
    --fbx-drawer-bg: #{$drawer-bg};
    --fbx-drawer-width: #{$drawer-width};
    --fbx-drawer-size-peekable: #{$drawer-size-peekable};

    // Overlay
    --fbx-drawer-overlay-bg: #{$drawer-overlay-bg};
    --fbx-drawer-overlay-bg-dark: #{$drawer-overlay-bg-dark};
}