Drawer with gutter and push

Example template with a drawer. A drawer is an (auto-) collapsible sidebar with navigational elements. You see this pattern often in dashboards. Toggling the drawer is done with the checkbox hack.

When collapsed, the sidebar still has visible icons in a gutter.

When expanded, the header and main content are pushed away.

This has a different DOM structure than the default drawer layout.

Selector		Description
`.layout--drawer-push`	Required	On the `html` tag
`.layout--drawer-gutter`	Required	On the `html` tag
`.layout--fixed-header`	Required	On the `html` tag.
`.hamburger__checkbox`	Required	The checkbox hack
`.hamburger`	Required	The clickable region that holds the hamburger icon
`.drawer__checkbox`	Deprecated	Replaced by `.hamburger__checkbox`
`.drawer__menu`	Deprecated	Replaced by `.hamburger`
`.drawer`	Required	Direct child of `.main-container`
`.drawer--gutter`	Required	Modifier on `.drawer`, this makes the icons visible when the drawer is collapsed
`.drawer__section`	Optional	Place your navigational elements in here.
`title=""`	Required	On `.nav__link`. For improved UX when the drawer is collapsed and the icons are visible
`<span class="nav__txt">...</span>`	Required	In `.nav__link`. To hide the descriptive text when the drawer is collapsed and the icons are visible

<!DOCTYPE html>
<html lang="en" class="no-js layout--drawer-push layout--drawer-gutter layout--fixed-header">
<head>...</head>
<body>
	<input type="checkbox" class="hamburger__checkbox" id="drawer-toggle">
	<label for="drawer-toggle" class="hamburger" role="button" aria-label="Menu">
		<span class="hamburger__line" role="presentation"></span>
		<span class="hamburger__line" role="presentation"></span>
		<span class="hamburger__line" role="presentation"></span>
	</label>
	<div class="drawer drawer--gutter">
		<div class="drawer__section">
			<div class="drawer__section-title">...</div>
			<!-- navigational elements here -->
		</div>
	</div>
	<div class="drawer__push-container">
		<header class="site-header">...</header>
		<main class="main-container">
			<div class="main-content">
				...
			</div>
		</main>
	</div>
</body>
</html>

Long filler text

Some long filler text to demo the scrolling behaviour. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam explicabo, eos inventore tempora eveniet facere minus iste soluta nulla nobis molestias veritatis, autem distinctio nam maiores non ullam vel laborum unde quisquam harum quidem. Commodi veritatis, vitae, nisi quidem porro aliquam soluta necessitatibus voluptatibus ex repellat deserunt molestiae neque sapiente laboriosam sequi! Architecto numquam suscipit, ex ipsa beatae.

Neque pariatur asperiores quidem natus provident voluptas expedita, architecto, officiis necessitatibus iure explicabo non mollitia quas voluptatum sunt commodi illo sequi, itaque nihil hic eaque tempore. Repudiandae ratione accusamus repellat necessitatibus quia aliquam, possimus. Amet voluptatibus delectus nostrum aperiam nulla dolorum cum saepe magnam adipisci consectetur numquam placeat voluptate ratione corporis odit necessitatibus fugiat autem, aspernatur quas, error, rerum a voluptatem iure!

Illum inventore doloremque, quas sit ad iusto aspernatur dicta autem, illo dolorum odio dolore similique laudantium consequuntur quasi sapiente facere pariatur possimus! Natus, repudiandae ea hic nemo nisi aliquid. Ad unde adipisci beatae quia! Animi voluptatem recusandae autem porro error dicta quas inventore. Dolorem laudantium ad quo temporibus tempore sunt omnis pariatur, exercitationem sint ipsum facilis modi commodi nam reiciendis consectetur velit dicta aliquid accusantium minima, repudiandae deleniti debitis porro enim! Minus corporis qui necessitatibus, consequatur, fugiat reprehenderit nam nihil.