created a responsive and interactive side bar that opens on command w…

…hich will store css attributes
Rllopez0410 · Jan 28, 2024 · 09bfcd9 · 09bfcd9
1 parent 5618fdc
commit 09bfcd9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 16 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -12,15 +12,27 @@
             <div class="icon">
                 <h2>StyleForge</h2>
             </div>
-            <nav>
+            <nav class="head-nav">
                 <ul id="nav-bar">
                     <li class="tabs">Home</li>
-                    <li class="tabs">Displays</li>
+                    <li class="tabs">Forge</li>
                     <li class="tabs">About</li>
                 </ul>
             </nav>
         </header>
         <main>
+            <button id="open-nav">open</button>
+            <nav class="side-nav" id="side-nav">
+                <div class="header-close">
+                    <div class="side-header">
+                        <h5>CSS Attributes</h5>
+                    </div>
+                    <button id="close-btn">close</button>
+                </div>
+                <ul class="css-attributes">display</ul>
+                <ul class="css-attributes">justify-content</ul>
+                <ul class="css-attributes">align-items</ul>
+            </nav>
             <div class="display">
                 <div class="browser-window">
                     <div class="browser-top">
@@ -45,7 +57,7 @@ <h2>StyleForge</h2>
                 </div>
             </div>
         </main>
-        <footer></footer>
+        <footer>Footer</footer>
     </div>
 </body>
 </html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.js b/src/index.js
@@ -1 +1,19 @@
 import  "./index.scss";
+
+const closeNav = document.getElementById("close-btn");
+const openNav = document.getElementById("open-nav");
+const sideNav = document.getElementById("side-nav");
+
+closeNav.addEventListener("click", closeSideNav);
+openNav.addEventListener("click", openSideNav);
+
+function closeSideNav() {
+    sideNav.style.width = "0";
+    sideNav.style.paddingLeft = "0";
+
+}
+
+function openSideNav() {
+    sideNav.style.width = "240px";
+    sideNav.style.paddingLeft = "10px";
+}
diff --git a/src/index.scss b/src/index.scss
@@ -28,17 +28,19 @@ body {
     height: 100dvh;
     header {
         display: flex;
-        border: 1px solid red;
+
         .icon {
             display: flex;
             align-items: center;
             padding-left: 2%;
             flex: 2;
-            border: 1px solid red;
+
+            h2 {
+                z-index: 2;
+            }
         }
-        nav {
+        .head-nav {
             @include displayFlex();
-
             flex: 3;
             #nav-bar {
                 @include displayFlex();
@@ -58,6 +60,7 @@ body {
                     box-shadow: 0px 0px 10px black;
                     padding-top: 100px;
                     transition: 450ms;
+                    z-index: 2;
                 }
                 .tabs:hover {
                     bottom: -50px;
@@ -69,24 +72,52 @@ body {
     }
     main {
         @include displayFlex();
-        border: 1px solid red;
+
         padding-top: 2%;
         padding-bottom: 2%;
+        flex: 1;
+        position: relative;
+        #open-nav {
+            position: absolute;
+            margin-top: 10px;
+            margin-left: 10px;
+            top: 0;
+            left: 0;
+        }
+        .side-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: #121212;
+            overflow-x: hidden;
+            transition: 0.5s;
+            padding-top: 80px;
+            padding-left: 0;
+            font-size: 24px;
+            .header-close {
+                display: flex;
+                align-items: center;
+            }
+        }
         .display {
             display: flex;
             width: 1020px;
             height: 550px;
             border-radius: 20px;
             overflow: hidden;
-            border: 1px solid red;
+
             box-shadow: 0px 5px 5px black;
             .browser-window {
                 display: flex;
                 flex-direction: column;
                 flex: 1;
                 .browser-top {
                     @include displayFlex();
-                    border: 1px solid red;
+
                     background-color: rgb(190, 190, 190);
                     flex: .7;
                     .browser-btns {
@@ -95,9 +126,9 @@ body {
                         flex: 1;
                         gap: 5px;
                         padding-left: 5px;
-                        border: 1px solid red;
+
                         .circles {
-                            border: 1px solid red;
+
                             width: 20px;
                             height: 20px;
                             border-radius: 100px;
@@ -115,7 +146,7 @@ body {
                     .browser-search {
                         @include displayFlex();
                         flex: 4;
-                        border: 1px solid red;
+
                         .search-bar {
                             width: 600px;
                             height: 35px;
@@ -127,9 +158,13 @@ body {
                 .browser-display {
                     flex: 6;
                     background-color: rgb(255, 255, 255);
-                    border: 1px solid red;
+
                 }
             }
         }
     }
-}
+    footer {
+        @include displayFlex();
+        background-color: #121212;
+    }
+}