layout

<div data-component="layout">
  <nav data-component="layout-sidebar"></nav>
  <main data-component="layout-content"></main>
</div>

Import

Import just the layout styles.

@import "@winnie-ui/css/spatial/layout";

Anatomy

Attach the appropriate data-component attributes in the structure below.

<div data-component="layout">
  <div data-component="layout-overlay" />
  <nav data-component="layout-sidebar" />
  <main data-component="layout-content" />
</div>

Examples

State

The sidebar component supports a data-state attribute that allows you to adjust the behaviour of the sidebar in the layout.

Layout uses a breakpoint of 768px to determine when to hide and close the sidebar. Due to a limitation in css, we do not provide an easy way to overrite this since we cannot use variables in media queries. So, this means that when the sidebar is docked it will close when the screen width becomes less than 768px.

You can provide users that ability to conditionally open the sidebar by setting data-state to open.

Docked

Set data-state to docked in order to persist the sidebar in the layout.

<div data-component="layout">
  <nav data-component="layout-sidebar" data-state="docked"></nav>
  <main data-component="layout-content"></main>
</div>

Open

Set data-state to open to allow the user to interact with the sidebar while it overlays the layout content slot. Room is purposefully provided at the top of the sidebar to provide you the ability to include a button to allow the user to dock the sidebar again. However, you’ll notice that when the breakpoint is hit, the sidebar goes full height, similar to the traditional mobile sidebar menus.

<div data-component="layout">
  <div data-component="layout-overlay"></div>
  <nav data-component="layout-sidebar" data-state="open"></nav>
  <main data-component="layout-content"></main>
</div>

Closed

Set data-state to closed to remove either undock the sidebar or remove it from the overlay.

<div data-component="layout">
  <div data-component="layout-overlay"></div>
  <nav data-component="layout-sidebar" data-state="closed"></nav>
  <main data-component="layout-content"></main>
</div>

Reference

layout

Groups all of the parts of the layout together.