From 7a8cee40df42b57f0cf2023f985f0c7bf6300646 Mon Sep 17 00:00:00 2001
From: DarkIntaqt <61588850+DarkIntaqt@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:54:55 +0100
Subject: [PATCH] working navbar

---
 layouts/Header.js         | 167 +++++++++++++++++++++++---------------
 styles/header.module.scss |  79 +++++++++++++++---
 2 files changed, 170 insertions(+), 76 deletions(-)

diff --git a/layouts/Header.js b/layouts/Header.js
index f4f266d..9cdefd4 100644
--- a/layouts/Header.js
+++ b/layouts/Header.js
@@ -23,77 +23,112 @@ export class Header extends Component {
       super();
 
       this.header = createRef(null);
+      this.headerPlaceholder = createRef(null);
+      this.buttonText = createRef(null);
+
+      this.toggleWidth = this.toggleWidth.bind(this);
+
+      /**
+       * true = expanded
+       * false = collapsed
+       */
+      this.width = true;
+   }
+
+
+   toggleWidth() {
+
+      if (this.width === true) {
+         this.header.current.classList.add(css.collapsed);
+         this.headerPlaceholder.current.classList.add(css.collapsed);
+
+         this.buttonText.current.innerText = "Ellapse";
+
+         this.width = false;
+      } else {
+         this.header.current.classList.remove(css.collapsed);
+         this.headerPlaceholder.current.classList.remove(css.collapsed);
+
+         this.buttonText.current.innerText = "Collapse";
+
+         this.width = true;
+      }
+
    }
 
 
    render() {
 
-      return <nav className={css.header} id="header" ref={this.header}>
-
-         <Link href="/" >
-            <Logo />
-            <p>Challenge Tracker</p>
-         </Link>
-
-         <div className={css.scrollSection}>
-
-            <Link href="/">
-               <FontAwesomeIcon
-                  icon={faHouse}
-               />
-
-               <p>Home</p>
-            </Link>
-
-            <Link href="/challe nges">
-               <FontAwesomeIcon
-                  icon={faCompass}
-               />
-               <p>Challenges</p>
-            </Link>
-
-            <Link href="/">
-               <FontAwesomeIcon
-                  icon={faRankingStar}
-               />
-               <p>Leaderboards</p>
-            </Link>
-
-            <Link href="/">
-               <FontAwesomeIcon
-                  icon={faAward}
-               />
-               <p>Titles</p>
-            </Link>
-
-            <Link href="/">
-               <FontAwesomeIcon
-                  icon={faUserGroup}
-               />
-               <p>Communities</p>
-            </Link>
-
-            <Link href="/">
-               <FontAwesomeIcon
-                  icon={faGear}
-               />
-               <p>Settings</p>
-            </Link>
-
-         </div>
-
-         <div className={css.footer}>
-
-            <button type="button">
-               <FontAwesomeIcon
-                  icon={faChevronLeft}
-               />
-               <p>Collapse</p>
-            </button>
-
-         </div>
-
-      </nav>;
+      return <>
+         <section className={css.headerPlaceholder} ref={this.headerPlaceholder}>
+            <nav className={css.header} id="header" ref={this.header}>
+
+               <Link href="/" >
+                  <Logo />
+                  <p>Challenge Tracker</p>
+               </Link>
+
+               <div className={css.scrollSection}>
+
+                  <Link href="/">
+                     <FontAwesomeIcon
+                        icon={faHouse}
+                     />
+
+                     <p>Home</p>
+                  </Link>
+
+                  <Link href="/challe nges">
+                     <FontAwesomeIcon
+                        icon={faCompass}
+                     />
+                     <p>Challenges</p>
+                  </Link>
+
+                  <Link href="/">
+                     <FontAwesomeIcon
+                        icon={faRankingStar}
+                     />
+                     <p>Leaderboards</p>
+                  </Link>
+
+                  <Link href="/">
+                     <FontAwesomeIcon
+                        icon={faAward}
+                     />
+                     <p>Titles</p>
+                  </Link>
+
+                  <Link href="/">
+                     <FontAwesomeIcon
+                        icon={faUserGroup}
+                     />
+                     <p>Communities</p>
+                  </Link>
+
+                  <Link href="/">
+                     <FontAwesomeIcon
+                        icon={faGear}
+                     />
+                     <p>Settings</p>
+                  </Link>
+
+               </div>
+
+               <div className={css.footer}>
+
+                  <button type="button" onClick={this.toggleWidth}>
+                     <FontAwesomeIcon
+                        icon={faChevronLeft}
+                     />
+                     <p ref={this.buttonText}>Collapse</p>
+                  </button>
+
+               </div>
+
+            </nav>
+         </section>
+      </>;
 
    }
 }
\ No newline at end of file
diff --git a/styles/header.module.scss b/styles/header.module.scss
index 1621ac8..e07d31b 100644
--- a/styles/header.module.scss
+++ b/styles/header.module.scss
@@ -1,17 +1,30 @@
 @import 'variables';
 
+$width: 230px;
+
+.headerPlaceholder {
+   width: $width;
+   transition: .25s width;
+
+   &.collapsed {
+      width: calc(20px + 2rem);
+   }
+}
+
 .header {
    height: 100%;
-   width: 230px;
+   width: $width;
    box-sizing: border-box;
    border-right: 1px solid $dark3;
 
    box-shadow: 0 0 15px -5px #000;
 
-   position: relative;
-   z-index: 5;
+   position: fixed;
+   z-index: 15;
+   overflow-x: hidden;
 
    background-color: $dark1;
+   transition: .25s width;
 
    >a {
 
@@ -19,9 +32,11 @@
       align-items: center;
       justify-content: center;
       height: 80px;
+      width: $width;
 
       padding: 10px;
 
+
       &:hover {
 
          p {
@@ -38,6 +53,8 @@
       p {
          margin-left: 10px;
 
+
+         white-space: nowrap;
          color: white;
          font-weight: bold;
          font-size: 1.2rem;
@@ -51,13 +68,14 @@
       width: 100%;
       height: calc(100% - 130px);
       overflow-y: auto;
+      overflow-x: hidden;
 
       a {
          display: flex;
+         width: $width;
          align-items: center;
-         justify-content: flex-start;
 
-         padding: 20px;
+         padding: 20px 10px;
          overflow: hidden;
 
          color: $light2;
@@ -68,8 +86,10 @@
          p {
             padding: 0;
             margin: 0;
+            flex: 1;
             color: $light2;
             font-size: 1rem;
+            padding-left: 10px;
 
             transition: .25s color;
          }
@@ -77,7 +97,6 @@
          svg {
             text-align: center;
             width: 2rem;
-            margin-right: 10px;
          }
 
          &:hover {
@@ -97,12 +116,16 @@
       width: 100%;
       padding: 0 10px;
 
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: flex-end;
 
+      border-top: 1px solid $dark3;
+
       button {
-         background-color: $dark3;
+         width: 100%;
+         background-color: $dark1;
          border: none;
          cursor: pointer;
          outline: none;
@@ -143,15 +166,51 @@
       }
    }
 
+   &.collapsed {
+      width: calc(20px + 2rem);
+
+      .footer {
+         padding: 0;
+
+         button {
+            margin: 0 auto;
+         }
+
+         p {
+            display: none;
+         }
+
+         svg {
+            transform: rotate(180deg);
+         }
+      }
+
+      &:hover {
+         width: $width;
+
+         p,
+         .scrollSection a p,
+         .footer p {
+            display: block;
+         }
+
+         .footer {
+            padding: 0 10px;
+
+
+            button {
+               margin: 0;
+            }
+         }
+      }
+   }
+
    @media only screen and (max-height:500px) {
 
       .scrollSection {
          box-shadow: inset 0px -15px 15px -15px #000;
       }
 
-      .footer {
-         border-top: 1px solid $dark3;
-      }
    }
 
 }
\ No newline at end of file