work done

numanarshad123 · Jan 2, 2024 · f7971b1 · f7971b1
1 parent b3e4ff5
commit f7971b1
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -14,9 +14,87 @@
 <body>
     <nav>
         <div class="logo">
-            <i class='bx bx-menu'></i>
+            <i class='bx bx-menu menu-icon'></i>
             <span class="logo-name">CodingLab</span>
         </div>
+
+    <div class="Sidebar">
+        <div class="logo">
+            <i class='bx bx-menu menu-icon'></i>
+            <span class="logo-name">CodingLab</span>
+        </div>
+
+        <div class="Sidebar-content">
+            <ul class="lists">
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-home-alt icon'></i>
+                        <span class="link">Dashboard</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-bar-chart-alt-2 icon'></i>
+                        <span class="link">Revenue</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-bell icon'></i>
+                        <span class="link">Notification</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-message-rounded icon'></i>
+                        <span class="link">Messages</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-pie-chart-alt-2 icon'></i>
+                        <span class="link">Analytics</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-heart icon'></i>
+                        <span class="link">Likes</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-folder-open icon'></i>
+                        <span class="link">Files</span>
+                    </a>
+                </li>
+            </ul>
+
+            <div class="bottom-content">
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-cog icon'></i>
+                        <span class="link">Settings</span>
+                    </a>
+                </li>
+                <li class="list">
+                    <a href="#" class="nav-link">
+                        <i class='bx bx-log-out icon'></i>
+                        <span class="link">Logout</span>
+                    </a>
+                </li>
+            </div>
+        </div>
+    </div>
     </nav>
+
+    <section class="overlay"></section>
+    <script>
+          const navBar = document.querySelector("nav"),
+          menuBtns = document.querySelectorALL(".menu-icon"),
+          overlay = document.querySelectorALL(".overlay");
+        console.log(navBar, menuBtns, overlay);
+
+    </script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+
+}
+body{
+    min-height: 100%;
+    background:  #e3f2fd; 
+
+}
+nav{
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 70px;
+    width:100%;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+}  
+nav .logo{
+    display: flex;
+    align-items: center;
+    margin: 0 24px;
+}
+.logo .menu-icon{
+    color: #333;
+    font-size: 0 24px;
+    margin-right: 14px;
+    cursor: pointer;
+}
+.logo .logo-name{
+    color: #333;
+    font-size: 22px;
+    font-weight: 500;
+}
+nav .Sidebar{
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 260px;
+    padding: 20px 0;
+    opacity: 0.7;
+    background-color: #fff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+.Sidebar .Sidebar-content{
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 30px 16px;
+}
+.Sidebar-content .list{
+    list-style: none;
+}
+.list .nav-link{
+    display:flex;
+    align-items: center;
+    padding: 14px 12px;
+    border-radius: 8px;
+    text-decoration: none;
+}
+.nav-link:hover{
+    background-color: aqua;
+}
+.nav-link .icon{
+    margin-right: 14px;
+    font-size: 20px;
+    color: #707070;
+}
+.nav-link .link{
+    font-size: 14px;
+    color: #707070;
+    font-weight: 400;
+}
+.nav-link:hover .icon,
+.nav-link:hover .link{
+    color: #fff;
+}
+.overlay{
+    position: fixed;
+    top: 0;
+    left: 260px;
+    height: 1000vh;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+}