add .

Renstrio24p · Jun 30, 2023 · 4cf778d · 4cf778d
1 parent 1a2fb7e
commit 4cf778d
Show file tree

Hide file tree

Showing 13 changed files with 412 additions and 77 deletions.
diff --git a/dist/src/components/Rightbar.js b/dist/src/components/Rightbar.js
@@ -1,37 +1,28 @@
+import Rightbar_Render from "../render/Home/rightbar.render";
 import { style_right } from "../start";
+import Rightbar_Collapse from "./rightbar/functions/rightbar_collapse";
 
-export default function RightbarContent(Right){
-    Right.innerHTML = (
-        `
-        <div id='rightbar' class="${style_right('rightbar')}">
-          <p>WIP</p>   
+export default function RightbarContent(Right) {
+  Right.innerHTML = (
+    `
+    <div id="rightbarcontent" class="${style_right('rightbar')}">
+      <div class=${style_right('content')}>
+        <div class="${style_right('hamburger')}">
+          <div class="${style_right('line')}"></div>
+          <div class="${style_right('line')}"></div>
+          <div class="${style_right('line')}"></div>
         </div>
-      
-        `
-    )
+        <div class="${style_right('content')}">
+          <h2>Portfolio</h2>
+          <div id='rightlist'></div>
+          <div class="${style_right('overlay')}"></div>
+        </div>
+      </div>
+    </div>
+  `
+  )
 
+  Rightbar_Collapse();
+  Rightbar_Render();
 
-    // document.addEventListener('click', function(event) {
-    //     const rightbar = document.querySelector(`.${style_right('rightbar')}`);
-
-    //     if (!rightbar.contains(event.target)) {
-    //       const hamburger = document.getElementById('ham');
-    //       const collapsibleContent = document.getElementById('content');
-
-    //       rightbar.classList.remove(`${style_right('open')}`);
-    //       hamburger.classList.remove(`${style_right('open')}`);
-    //       collapsibleContent.classList.remove(`${style_right('open')}`);
-    //     }
-    //   });
-
-    //   const hamburger = document.getElementById('ham');
-    //   const collapsibleContent = document.getElementById('content');
-    //   const rightbar = document.querySelector(`.${style_right('rightbar')}`);
-
-    //   hamburger.addEventListener('click', function() {
-    //     this.classList.toggle(`${style_right('open')}`);
-    //     collapsibleContent.classList.toggle(`${style_right('open')}`);
-    //     rightbar.classList.toggle(`${style_right('open')}`);
-    //   });
-
-}
+}
diff --git a/dist/src/components/rightbar/functions/rightbar_collapse.js b/dist/src/components/rightbar/functions/rightbar_collapse.js
@@ -0,0 +1,27 @@
+import { style_right } from "../../../start";
+
+export default function Rightbar_Collapse() {
+
+    const rightbar = document.querySelector('#rightbarcontent');
+    const hamburger = document.querySelector(`.${style_right('hamburger')}`);
+    const overlay = document.querySelector(`.${style_right('overlay')}`);
+
+    hamburger.addEventListener('click', toggleRightBar);
+    document.addEventListener('click', closeRightBar);
+
+    function toggleRightBar(event) {
+        event.stopPropagation();
+        rightbar.classList.toggle(`${style_right('collapsed')}`);
+        hamburger.classList.toggle(`${style_right('active')}`);
+        overlay.classList.toggle(`${style_right('collapsed')}`);
+    }
+
+    function closeRightBar(event) {
+        if (rightbar.contains(event.target)) {
+            rightbar.classList.remove(`${style_right('collapsed')}`);
+            hamburger.classList.remove(`${style_right('active')}`);
+            overlay.classList.remove(`${style_right('collapsed')}`);
+        }
+    }
+
+}
diff --git a/dist/src/components/rightbar/rightlist.js b/dist/src/components/rightbar/rightlist.js
@@ -0,0 +1,22 @@
+
+export default function RightbarList(RList){
+
+    RList.innerHTML = (
+
+        `
+            <ul>
+                <li>
+                    <p>item 1</p>
+                </li>
+                <li>
+                    <p>item 2</p>
+                </li>
+                <li>
+                    <p>item 3</p>
+                </li>
+            </ul>
+        `
+
+    )
+
+}
diff --git a/dist/src/render/Home/rightbar.render.js b/dist/src/render/Home/rightbar.render.js
@@ -0,0 +1,11 @@
+import RightbarList from "../../components/rightbar/rightlist";
+import UniqueHash from "../../security/Hashes";
+
+export default function Rightbar_Render(){
+    const RList = document.getElementById('rightlist');
+    window.addEventListener('DOMContentLoaded', () => {
+        RList.id = UniqueHash();
+    })
+
+    RightbarList(RList);
+}
diff --git a/dist/src/sass/modules/app.module.scss b/dist/src/sass/modules/app.module.scss
@@ -1,8 +1,8 @@
 .main-style {
-    width: calc(100% - 400px);
+    width: calc(100% - 360px);
     position: fixed;
     top: 0;
-    right: 100px;
+    right: 60px;
     bottom: 0;
     background-color: #242828;
     overflow-y: scroll;
@@ -18,6 +18,7 @@
 .home {
   width: 100%;
   background-image: url("../../images/background.webp");
+  background-size: cover;
   height: 350px;
 }
 

diff --git a/dist/src/sass/modules/rightbar.module.scss b/dist/src/sass/modules/rightbar.module.scss
@@ -1,7 +1,106 @@
-
 .rightbar {
-  width: 100px;
+  width: 60px;
   height: 100%;
   position: fixed;
   right: 0;
-}
+  background-color: rgb(51, 53, 53);
+  z-index: 99;
+  transition: width 0.3s ease;
+  justify-content: left;
+  display: flex;
+}
+
+.rightbar h2 {
+   color: #fff;
+   writing-mode: vertical-rl;text-orientation: mixed;
+   font-weight: 600;
+   font-size: 20px;
+   display: block;
+   transition: 1s;
+}
+
+.rightbar.collapsed {
+  width: 300px;
+  transition: width 0.3s ease;
+  justify-content: left;
+}
+
+.rightbar.collapsed h2 {
+  display: none;
+  transform: .5s;
+}
+
+.rightbar.collapsed ul {
+  display: block;
+  color: #fff;
+}
+
+.rightbar ul {
+  display: none;
+}
+
+.content {
+  padding-top: 30px;
+  padding-left: 7px;
+  display: flex;
+  justify-content: left;
+  width: 100%;
+}
+
+
+
+.hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+}
+
+
+.hamburger .line {
+  width: 20px;
+  height: 2px;
+  background-color: #fff;
+  margin: 3px;
+  transition: transform 0.3s ease;
+}
+
+.hamburger.active {
+  left: 10px
+}
+
+.hamburger.active .line:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger.active .line:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger.active .line:nth-child(3) {
+  transform: rotate(-45deg) translate(5px, -5px);
+}
+
+.overlay.collapsed {
+  width: 100%;
+  right: 0;
+  height: 100vh;
+  z-index: -1;
+  background-color: rgba(51, 53, 53, 0.678);
+  position: fixed;
+  transition: .5s;
+  top: 0;
+}
+
+.overlay {
+  background-color: transparent;
+  transition: .5s;
+
+}