//- Side Nav
#nav.side-nav
	.links
		a.link(href="#")
			span Home
		a.link(href="#")
			span Profile
		a.link(href="#")
			span Settings
//- Main Content
main
	header
		a.open(href="#nav")
			svg(viewBox="0 0 448 512", width="20", title="bars")
				path(
					d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
				)
			span Menu
		a.close(href="#")
			svg(viewBox="0 0 448 512", width="20", title="outdent")
				path(
					d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
				)
			span Close
	p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu felis, finibus in lectus vitae, fermentum tempus nisl. Duis libero dolor, venenatis et lorem nec, lobortis vestibulum felis. Donec justo enim, venenatis vitae ex a, finibus mollis est. Donec placerat magna at nisl condimentum tincidunt. Sed eget faucibus elit. Aliquam tristique est non diam molestie, eu bibendum ante porta. Donec in lacinia dui.

	p Nulla ac dictum turpis, quis consequat odio. Pellentesque rhoncus est quis nibh pulvinar sagittis. Donec rhoncus molestie massa nec pellentesque. Maecenas et nisl magna. Sed lorem nulla, aliquam sed nibh et, ornare vestibulum lacus. Vivamus suscipit magna et arcu condimentum laoreet. Suspendisse venenatis ligula quam, quis ornare libero iaculis a. Aenean posuere, libero at ultricies commodo, nibh neque eleifend erat, id molestie quam nulla ac libero. Proin dignissim nunc a ante viverra, quis facilisis nisl rutrum. Morbi tempus lectus a est placerat venenatis. Sed quis risus rhoncus, placerat turpis vitae, lacinia justo. Duis massa lectus, auctor et nunc et, egestas dictum orci. Nam ex enim, vehicula in lacus vel, fringilla imperdiet velit. Nulla est mi, suscipit vel nunc sed, sollicitudin egestas purus. Nulla in dignissim eros.
View Compiled
// TODO - Cleanup

html,
body {
	height: 100%;
}

body {
	font-family: monospace;
	margin: 0;
	background: #ededed;
}

main {
	padding: 1rem 1rem 0 1rem;
	transition: margin 0.3s;
}

.side-nav {
	padding: 1rem;
	box-sizing: border-box;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	transform: translatex(-100%);
	transition: transform 0.3s;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

	&:target {
		transform: translatex(0);

		& ~ main {
			margin-left: 300px;

			& .open {
				display: none;
			}
		}
	}

	&:not(:target) ~ main .close {
		display: none;
	}

	.links {
		display: flex;
		flex-direction: column;

		> .link {
			font-size: 1.5rem;
			text-decoration: none;
			padding: 0.5rem 1rem;
			border: 1px solid silver;
			margin-bottom: 0.5rem;
			border-radius: 1rem;
		}
	}
}

.open,
.close {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	border-radius: 1rem;
	font-size: 1.5rem;
	background: white;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid silver;
	> svg {
		margin-right: 1rem;
	}
}
View Compiled
// Nothing to see here...
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.