.headerNav {
	position: fixed;
	top: 32px;
	left: 0px;
	padding: 5px 10px;
	background-color: #ccc;
	border-radius: 5px;
	max-height: calc(100vh - 32px);
	max-width: 40vw;
	overflow-y: auto;
    &.active {
        padding-bottom: 10px;
        .navIcon {
            padding-bottom: 10px;
        }
    }
	.navIcon {
		cursor: pointer;
	}
	li {
		list-style-type: none;
		a {
			display: inline-block;
			width: 100%;
			font-family: 'Open Sans';
			font-size: 12px;
			padding: 2px;
			color: inherit;
			text-decoration: none;
			cursor: pointer;
			&:hover {
				text-decoration: underline;
			}
			&.pageLink {
				font-weight: 900;
			}

			@depths: 1,2,3,4,5,6,7;

			each(@depths, {
				&.depth-@{value} {
					padding-left: ((@value - 1) * 0.5em);
				}
			});
		}
	}
}