From b53c40e3e540027f41aea94c0f221a6002c2f74c Mon Sep 17 00:00:00 2001
From: Serik <serik.shaikamalov@gmail.com>
Date: Wed, 10 Jul 2024 12:19:11 +0500
Subject: [PATCH] dashboard layout

---
 layouts/simple-dashboard/index.html | 286 ++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 layouts/simple-dashboard/index.html
diff --git a/layouts/simple-dashboard/index.html b/layouts/simple-dashboard/index.html
new file mode 100644
index 0000000..af17cc1
--- /dev/null
+++ b/layouts/simple-dashboard/index.html
@@ -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>
\ No newline at end of file
