<body>
<div id="menu-header-container" class="page-header">
<div id="menu-header-container-wrapper" class="page-header-wrapper">
<div class="hamburger-wrapper">
<a id="menu-hamburger-menu" class="hamburger-menu {{^showHamburger}}hidden{{/showHamburger}}" href="#" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</a>
</div>
</div>
</div>
<div id="menu" class="sidebar">
<div id="menu-wrapper" class="sidebar-wrapper">
<ul id="home">
<li><a data-id="dashboard" href="#"><i class="fa fa-home"></i> Home</a></li>
<li class="section"><i class="fa fa-search"></i> Browse</li>
<li><a data-id="browsepresentations" href="#"><i class="fa fa-pencil-square-o"></i> Posts</a></li>
<li><a data-id="browsedocuments" href="#"><i class="fa fa-file-o"></i> Files</a></li>
<li class="section"><i class="fa fa-check-circle-o"></i> Your downloads</li>
<li><a data-id="presentations" href="#"><i class="fa fa-pencil-square"></i> Posts</a></li>
<li><a data-id="documents" href="#"><i class="fa fa-file"></i> Files</a></li>
<li class="section"><i class="fa fa-paper-plane-o"></i> Messages</li>
<li><a data-id="browsemessages" href="#"><i class="fa fa-inbox"></i> Inbox</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<h2>Some Lorem Ipsum</h2>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
<p class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices maximus nibh, eu dapibus nibh tristique ut. Maecenas leo turpis, semper quis quam id, posuere vestibulum augue. Proin odio est, tempor ac euismod id, fringilla nec augue. Suspendisse
et velit at sem aliquam vestibulum et sit amet arcu. Cras placerat, nisl ut condimentum venenatis, purus magna molestie quam, ut tempor felis ipsum in risus. Sed venenatis sodales odio ac tincidunt. Etiam faucibus rutrum faucibus. Nulla vulputate
ullamcorper quam non vestibulum.
</p>
</div>
</div>
</body>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
body.disable-scroll {
height: 100%;
overflow: hidden;
}
.container {
width: 70%;
max-width: 960px;
margin: 80px auto;
}
h2 {
margin: 2.5%;
color: #353535;
font-size: 1.5em;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
.col-6 {
width: 45%;
float: left;
margin: 0 2.5% 2.5%;
}
@media only screen and (max-width: 45em){
.col-6 {
width: 100%;
}
}
.col-6::after {
display: table;
content: '';
clear: both;
}
p {
font-size: 0.95em;
color: #555;
line-height: 1.6;
}
.page-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 60px;
background-color: #f9f9f9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.page-header.sidebar-open {
background-color: rgba(0, 0, 0, 0.95);
}
.page-header * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.page-header a {
color: #205b7d;
font-size: 1.5em;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header a:focus {
outline: none;
}
.page-header a i {
color: #205b7d;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header a:hover {
color: #2176a7;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header a:hover i {
color: #2176a7;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header.scrolled {
background-color: #205b7d;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header.scrolled.sidebar-open {
background-color: rgba(0, 0, 0, 0.95);
}
.page-header.scrolled.sidebar-open a {
color: #205b7d !important;
}
.page-header.scrolled.sidebar-open a i {
color: #205b7d !important;
}
.page-header.scrolled.sidebar-open a .line {
background: #2176a7 !important;
}
.page-header.scrolled.sidebar-open a:hover {
color: #2176a7 !important;
}
.page-header.scrolled.sidebar-open a:hover i {
color: #2176a7 !important;
}
.page-header.scrolled.sidebar-open h1 {
color: #205b7d !important;
}
.page-header.scrolled a {
color: #c9c9c9;
}
.page-header.scrolled a i {
color: #c9c9c9;
}
.page-header.scrolled a:hover {
color: #ffffff;
}
.page-header.scrolled a:hover i {
color: #ffffff;
}
.page-header.scrolled .page-header-wrapper .page-title h1 {
color: #ffffff;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line {
background: #c9c9c9;
}
.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line {
background: #ffffff;
}
.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line {
background: #ffffff;
}
.page-header.scrolled .page-header-wrapper .cog-wrapper a.active i {
color: #ffffff;
}
.page-header .page-header-wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
line-height: 60px;
}
.page-header .page-header-wrapper .page-title {
position: absolute;
top: 0;
left: 50%;
width: 30%;
margin-left: -15%;
}
@media only screen and (max-width: 540px) {
.page-header .page-header-wrapper .page-title {
display: none;
}
}
.page-header .page-header-wrapper .page-title h1 {
text-align: center;
color: #205b7d;
text-transform: uppercase;
font-size: 1em;
line-height: 60px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header .page-header-wrapper .hamburger-wrapper {
float: left;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu {
width: 25px;
position: relative;
display: block;
line-height: 60px;
margin: 0 auto;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.hidden {
display: none;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line {
display: block;
margin: 0 auto;
background: #205b7d;
width: 25px;
height: 3px;
border-radius: 4px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-1 {
margin-top: 21px;
margin-top: calc((60px - 17px) / 2);
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-2 {
margin-top: 4px;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-3 {
margin-top: 4px;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line {
background: #2176a7;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line-1 {
transform: translateY(-2px);
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line-3 {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line {
background: #2176a7;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-1 {
transform: translateY(7px) translateX(0) rotate(45deg);
-webkit-transform: translateY(7px) translateX(0) rotate(45deg);
-moz-transform: translateY(7px) translateX(0) rotate(45deg);
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-2 {
opacity: 0;
}
.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-3 {
transform: translateY(-7px) translateX(0) rotate(-45deg);
-webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
-moz-transform: translateY(-7px) translateX(0) rotate(-45deg);
}
.page-header .page-header-wrapper .sync-wrapper {
float: left;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .sync-wrapper a.sync-button i {
-webkit-transform-origin: center;
transform-origin: center;
}
.page-header .page-header-wrapper .search-wrapper {
float: left;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .network-wrapper {
float: right;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .network-wrapper i {
color: #3ccd41;
}
.page-header .page-header-wrapper .network-wrapper.offline i {
color: #fa0b2b;
}
.page-header .page-header-wrapper .inbox-wrapper {
float: right;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .inbox-wrapper a {
display: block;
position: relative;
}
.page-header .page-header-wrapper .inbox-wrapper a span {
display: none;
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
font-size: 0.35em;
line-height: 20px;
background: #df122d;
color: #ffffff;
font-weight: bold;
border-radius: 50%;
}
.page-header .page-header-wrapper .inbox-wrapper a span.unread-messages {
display: block;
}
.page-header .page-header-wrapper .cog-wrapper {
float: right;
height: 60px;
width: 60px;
text-align: center;
}
.page-header .page-header-wrapper .cog-wrapper a i {
-webkit-transform-origin: center;
transform-origin: center;
}
.page-header .page-header-wrapper .cog-wrapper a.active i {
-webkit-transform: translate(0, 0) rotate(25deg);
transform: translate(0, 0) rotate(25deg);
color: #2176a7;
}
.page-header .page-header-wrapper .settings-menu {
position: fixed;
top: 75px;
width: 10%;
max-width: 250px;
min-width: 200px;
right: 20px;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: hidden;
}
.page-header .page-header-wrapper .settings-menu.active {
opacity: 1;
top: 51px;
visibility: visible;
z-index: 99;
}
.page-header .page-header-wrapper .settings-menu ul {
padding: 20px;
background: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.page-header .page-header-wrapper .settings-menu ul li {
display: block;
text-align: left;
line-height: 30px;
}
.page-header .page-header-wrapper .settings-menu ul li a {
font-size: 0.85em;
color: #999999;
text-transform: uppercase;
font-weight: bold;
display: block;
}
.page-header .page-header-wrapper .settings-menu ul li a span.icon {
display: inline-block;
margin-right: 10px;
text-align: left;
}
.page-header .page-header-wrapper .settings-menu ul li a span.icon i {
margin-right: 10px;
color: #999999;
}
.page-header .page-header-wrapper .settings-menu ul li a:hover {
color: #333333;
}
.page-header .page-header-wrapper .settings-menu ul li a:hover span.icon i {
color: #333333;
}
.page-header .page-header-wrapper .settings-menu .settings-menu-arrow {
width: 0;
height: 0;
margin-left: calc(100% - 20px);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #ffffff;
display: block;
text-align: right;
}
.page-header .page-header-wrapper .settings-menu-overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: transparent;
}
.page-header .page-header-wrapper .settings-menu-overlay.active {
display: block;
}
.sidebar {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: transparent;
opacity: 0;
z-index: 99;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
visibility: hidden;
}
.sidebar.active {
opacity: 1;
background: rgba(0, 0, 0, 0.95);
visibility: visible;
}
.sidebar.active .sidebar-wrapper {
visibility: visible;
}
.sidebar .sidebar-wrapper {
position: fixed;
top: 60px;
height: 100%;
width: 100%;
padding: 5px 20px 20px;
visibility: hidden;
}
.sidebar .sidebar-wrapper ul li {
list-style: none;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
opacity: 0;
-webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
color: #ffffff;
text-transform: none;
display: block;
}
.sidebar .sidebar-wrapper ul li i {
display: inline-block;
width: 20px;
}
.sidebar .sidebar-wrapper ul li.section {
margin-top: 10px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.035);
width: 100%;
}
.sidebar .sidebar-wrapper ul li ul {
border: none;
}
.sidebar .sidebar-wrapper ul li ul li:last-child {
margin-bottom: 0;
}
.sidebar .sidebar-wrapper ul li ul li a {
text-transform: none;
margin-left: 5px;
}
.sidebar .sidebar-wrapper ul li.section {
text-transform: uppercase;
letter-spacing: 5px;
font-size: 1em;
}
.sidebar .sidebar-wrapper ul li a {
color: #999999;
text-transform: uppercase;
display: block;
text-decoration: none;
font-size: 0.85em;
padding: 10px 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sidebar .sidebar-wrapper ul li a i {
display: inline-block;
width: 20px;
}
.sidebar .sidebar-wrapper ul li a:hover {
color: #ffffff;
margin-left: 5px;
}
.sidebar .sidebar-wrapper.active ul li {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(1) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(4) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(5) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(6) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(7) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(8) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(9) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.sidebar .sidebar-wrapper.active ul li:nth-child(10) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
document.addEventListener("DOMContentLoaded", function() {
var self = this;
this.elements = {
header: {
container: function() {
return document.getElementById("menu-header-container");
},
hamburgerMenu: function() {
return document.getElementById("menu-hamburger-menu");
}
},
sidebar: {
overlay: function() {
return document.getElementById("menu");
},
wrapper: function() {
return document.getElementById("menu-wrapper");
}
}
};
this.binds = function() {
var sideLinks = document.querySelectorAll(".sidebar-wrapper li a");
sideLinks.forEach(function(link) {
link.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("body").classList.remove("disable-scroll");
self.elements.header.hamburgerMenu().classList.remove("active");
self.elements.sidebar.overlay().classList.remove("active");
self.elements.sidebar.wrapper().classList.remove("active");
self.elements.header.container().classList.remove("sidebar-open");
});
});
// Changes header colour after scrolled by 100px
window.addEventListener("scroll", function(e) {
var scrollTop =
window.pageYOffset !== undefined
? window.pageYOffset
: (document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop;
if (scrollTop > 100) {
if (self.elements.header.container()) {
self.elements.header.container().classList.add("scrolled");
}
} else {
if (self.elements.header.container()) {
self.elements.header.container().classList.remove("scrolled");
}
}
});
// Hamburger menu
if (this.elements.header.hamburgerMenu()) {
self.elements.header
.hamburgerMenu()
.addEventListener("click", function(e) {
e.preventDefault();
this.classList.toggle("active");
document.querySelector("body").classList.toggle("disable-scroll");
self.elements.sidebar.overlay().classList.toggle("active");
self.elements.sidebar.wrapper().classList.toggle("active");
self.elements.header.container().classList.toggle("sidebar-open");
});
}
// Hide sidebar when click target is not a link
if (this.elements.sidebar.overlay()) {
self.elements.sidebar.overlay().addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("body").classList.remove("disable-scroll");
if (e.target.tagName.toLowerCase() !== "a") {
self.elements.header.hamburgerMenu().classList.remove("active");
self.elements.sidebar.overlay().classList.remove("active");
self.elements.sidebar.wrapper().classList.remove("active");
self.elements.header.container().classList.remove("sidebar-open");
}
});
}
};
this.binds();
});
This Pen doesn't use any external JavaScript resources.