<div class="grid-container">
<div class="menu-icon">
<i class="fas fa-bars"></i>
</div>
<header class="header">
<div class="header__search">Search...</div>
<div class="header__avatar">Your face</div>
</header>
<aside class="sideNav">
<div class="sideNav__close-icon">
<i class="fas fa-times"></i>
</div>
<ul class="sideNav__list">
<li class="sideNav__list-item">Item One</li>
<li class="sideNav__list-item">Item Two</li>
<li class="sideNav__list-item">Item Three</li>
<li class="sideNav__list-item">Item Four</li>
<li class="sideNav__list-item">Item Five</li>
</ul>
</aside>
<main>
<div class="main-header">
<div class="main__heading">Hello User</div>
<div class="main__updates">Recent Items</div>
</div>
<div class="main-overview">
<div class="overviewcard">
<div class="overviewcard__icon">Overview</div>
<div class="overviewcard__info">Card</div>
</div>
<div class="overviewcard">
<div class="overviewcard__icon">Overview</div>
<div class="overviewcard__info">Card</div>
</div>
<div class="overviewcard">
<div class="overviewcard__icon">Overview</div>
<div class="overviewcard__info">Card</div>
</div>
</div>
<div class="main-cards">
<div class="card">Card1</div>
<div class="card">Card2</div>
<div class="card">Card3</div>
</div>
</main>
<footer class="footer">
<div class="footer__copyright">© Adjei</div>
<div class="footer__signature">Made with love by Eric Adjei</div>
</footer>
</div>
/* .grid-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
"sideNav header"
"sideNav main"
"sideNav footer";
height: 100vh;
} */
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
"header"
"main"
"footer";
height: 100vh;
}
.header {
grid-area: header;
background: #648ca6;
}
/* .sideNav {
display: flex; /* Will be hidden on mobile */ */
/* flex-direction: column;
grid-area: sideNav;
background: #394263;
} */
.sideNav {
display: none;
grid-area: sideNav;
background: #394263;
}
/* 750px */
@media only screen and (min-width: 46.875em) {
.grid-container {
grid-template-columns: 240px 1fr;
grid-template-areas:
"sideNav header"
"sideNav main"
"sideNav footer"
}
.sideNav {
display: flex;
flex-direction: column;
background: #394263;
}
}
.sideNav__list {
padding: 0;
margin-top: 85px;
list-style-type: none;
background: #394263;
}
.sideNav__list-item {
padding: 20px 20px 20px 40px;
color: #ddd;
}
.sideNav__list-item:hover {
background-color: rgba(255,255,255,0.2);
cursor: pointer;
}
main {
grid-area: main;
background-color: #8fd4d9;
}
.main-header {
display: flex;
justify-content: space-between;
margin: 20px;
padding: 20px;
height: 150px;
background-color: #e3e4e6;
color: slategray;
}
.main-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
grid-auto-rows: 94px;
grid-gap: 20px;
margin: 20px;
}
.overviewcard {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #d3d3;
}
/* .main-cards {
column-count: 2;
column-gap: 20px;
margin: 20px;
} */
.main-cards {
column-count: 1;
column-gap: 20px;
margin: 20px;
}
@media only screen and (min-width: 65.625em) {
.main-cards {
column-count: 2;
}
}
.card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color: #82bef6;
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
padding: 24px;
box-sizing: border-box;
}
.card:first-child{
height: 485px;
}
.card:nth-child(2) {
height: 200px;
}
.card:last-child {
height: 265px;
}
.footer {
grid-area: footer;
background: #648ca6;
}
.header, .footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background-color: #648ca6;
}
.menu-icon {
position: fixed;
display: flex;
top: 5px;
left: 10px;
align-item: center;
justify-content: center;
border-radius: 50%;
z-index: 1;
cursor: pointer;
padding: 12px;
background-color: #DADAE3;
}
.header__search {
margin-left: 42px;
}
.sideNav {
grid-area: sideNav;
display: flex;
flex-direction: column;
height: 100%;
width: 240px;
position: fixed;
overflow-y: auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
z-index: 2;
background-color: #394263;
transform: translateX(-245px);
transition: all .6s ease-in-out;
}
.sideNav:active {
transform: translateX(0)
}
.sideNav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #ddd;
}
@media only screen and (min-width: 46.875px;) {
.sideNav {
position: relative;
transform: translateX(0);
}
.sideNav__close-icon {
visibility: hidden;
}
}
// get elements
const menuIcon = document.querySelector('.menu-icon');
const sideNavEl = document.querySelector('.sideNav');
const sideNavClose = document.querySelector('.sideNav__close-icon')
menuIcon.addEventListener('click', () => {
// open
console.log(sideNavEl.classList.toggle('active'));
})
This Pen doesn't use any external CSS resources.