Skip to content

Commit

Permalink
dashboard layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@serikshaikamalov
serikshaikamalov committed Jul 10, 2024
1 parent ff47166 commit b53c40e
Showing 1 changed file with 286 additions and 0 deletions.
286 changes: 286 additions & 0 deletions layouts/simple-dashboard/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Building dashboard with gird and flex</title>
<style>
body {
margin: 0;
padding: 0;
color: white;
box-sizing: border-box;
font-family: monospace;
font-size: 15px;
}

.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-color: whitesmoke;
}

.aside {
grid-area: aside;
background-color: darkblue;
}

.main {
grid-area: main;
background-color: white;
}

.footer {
grid-area: footer;
background-color: whitesmoke;
}

/* flexing header and footer*/
.header,
.footer {
display: flex;
align-items: center;
justify-content: space-between;
color: darkblue;
padding: 0 15px;
}

/* flexing aside */
.aside {
display: flex;
flex-direction: column;
height: 100%;
width: 240px;
position: fixed;
overflow-y: auto;
z-index: 2;
transform: translateX(-245px);
}

.aside.active {
transform: translateX(0);
}

.aside_list {
padding: 0;
margin-top: 85px;
list-style-type: none;
}

.aside_list-item {
padding: 20px 20px 20px 40px;
color: #ddd;
}

.aside_list-item:hover {
background-color: royalblue;
cursor: pointer;
}

/* Layout for main content overview and its cards*/
.main_overview {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid lightgreen;
}

.overview_card {
flex-basis: 250px;
flex-grow: 1;
margin: 10px 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
/* background-color: seagreen; */
height: 100px;
border: 1px solid darkblue;
border-radius: 4px;
color: darkblue;
}

/* Layout for main-cards section // below main_overview */
.main_cards {
margin: 10px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 500px 200px 300px;
grid-template-areas:
'card1'
'card2'
'card3';
grid-gap: 10px;
}

.card {
padding: 20px;
border: 1px solid tomato;
border-radius: 4px;
color: tomato;
}

.card:first-child {
grid-area: card1;
}

.card:nth-child(2) {
grid-area: card2;
}

.card:nth-child(3) {
grid-area: card3;
}

/* responsive layout */
@media only screen and (min-width: 750px) {
.grid-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
'aside header'
'aside main'
'aside footer';
height: 100vh;
}

.aside {
display: flex;
flex-direction: column;
transform: translateX(0);
}

.main_cards {
margin: 10px;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 200px 300px;
grid-template-areas:
'card1 card2'
'card1 card3';
grid-gap: 10px;
}
}

.menu-icon {
position: fixed;
display: flex;
top: 2px;
left: 8px;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
padding: 12px;
color: black;
}

.header_search {
margin-left: 24px;
}

.aside_close-icon {
position: absolute;
visibility: visible;
top: 20px;
right: 20px;
cursor: pointer;
}

@media only screen and (min-width: 750px) {
.aside_close-icon {
display: none;
}
}
</style>
</head>

<body>
<div class="grid-container">
<div class="menu-icon">
<strong> &#9776;</strong>
</div>
<header class="header">
<div class="header_search">Search...</div>
<div class="header_avatar">Logout</div>
</header>
<aside class="aside">
<div class="aside_close-icon">
<strong>&times;</strong>
</div>
<ul class="aside_list">
<li class="aside_list-item">Menu item1</li>
<li class="aside_list-item">Menu item2</li>
<li class="aside_list-item">Menu item3</li>
<li class="aside_list-item">Menu item4</li>
<li class="aside_list-item">Menu item5</li>
</ul>
</aside>
<main class="main">
<div class="main_overview">
<div class="overview_card">
<div class="overview_card-info">Overview</div>
<div class="overview_card-icon">Card</div>
</div>
<div class="overview_card">
<div class="overview_card-info">Overview</div>
<div class="overview_card-icon">Card</div>
</div>
<div class="overview_card">
<div class="overview_card-info">Overview</div>
<div class="overview_card-icon">Card</div>
</div>
<div class="overview_card">
<div class="overview_card-info">Overview</div>
<div class="overview_card-icon">Card</div>
</div>
</div>

<div class="main_cards">
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
</div>
</main>
<footer class="footer">
<div class="footer_copyright">&copy;2020</div>
<div class="footer_byline">Made with &hearts;</div>
</footer>
</div>
<script type="text/javascript">
const menuIcon = document.querySelector('.menu-icon');
const aside = document.querySelector('.aside');
const asideClose = document.querySelector('.aside_close-icon');

function toggle(el, className) {
if (el.classList.contains(className)) {
el.classList.remove(className);
} else {
el.classList.add(className);
}
}

menuIcon.addEventListener('click', function () {
toggle(aside, 'active');
});

asideClose.addEventListener('click', function () {
toggle(aside, 'active');
});
</script>
</body>

</html>

0 comments on commit b53c40e

Please sign in to comment.