add a path highlighter

DarkIntaqt · Feb 15, 2023 · 41bba98 · 41bba98
1 parent 114f6ee
commit 41bba98
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 19 deletions.
diff --git a/layouts/Header.js b/layouts/Header.js
@@ -1,7 +1,9 @@
 import { Component, createRef } from "react";
+import { withRouter } from "next/router";
+import Link from "next/link";
+
 import css from "challenges/styles/header.module.scss";
 
-import Link from "next/link";
 import Logo from "challenges/assets/logo.svg";
 
 
@@ -18,21 +20,25 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
-export class Header extends Component {
-   constructor() {
-      super();
+class Header extends Component {
+   constructor(props) {
+      super(props);
+
+      this.props = props;
 
       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;
+
+
+      this.toggleWidth = this.toggleWidth.bind(this);
+      this.highlightActiveLink = this.highlightActiveLink.bind(this);
    }
 
 
@@ -57,56 +63,100 @@ export class Header extends Component {
    }
 
 
+   /**
+    * Highlights the current route by adding a the 
+    * css.active class
+    */
+   highlightActiveLink() {
+
+      const pathname = this.props.router.asPath;
+
+      const results = document.querySelectorAll(`.${css.scrollSection} a[href="${pathname}"]`);
+      const oldRouteElements = document.querySelectorAll(`.${css.scrollSection} a.${css.active}`);
+
+      for (let i = 0; i < oldRouteElements.length; i++) {
+         const old = oldRouteElements[i];
+         old.classList.remove(css.active);
+
+      }
+
+      for (let i = 0; i < results.length; i++) {
+         const result = results[i];
+         result.classList.add(css.active);
+      }
+
+   }
+
+
+   componentDidMount() {
+
+      this.props.router.events.on("routeChangeComplete", this.highlightActiveLink);
+      this.props.router.events.on("routeChangeError", this.highlightActiveLink);
+      this.highlightActiveLink();
+
+   }
+
+
+   componentWillUnmount() {
+
+      this.props.router.events.off("routeChangeComplete", this.highlightActiveLink);
+      this.props.router.events.off("routeChangeError", this.highlightActiveLink);
+
+   }
+
+
    render() {
 
+      const router = this.router;
+
       return <>
          <section className={css.headerPlaceholder} ref={this.headerPlaceholder}>
             <nav className={css.header} id="header" ref={this.header}>
 
-               <Link href="/" >
+               <Link href="/" prefetch={false}>
                   <Logo />
                   <p>Challenge Tracker</p>
                </Link>
 
                <div className={css.scrollSection}>
 
-                  <Link href="/">
+                  <Link href="/" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faHouse}
                      />
 
                      <p>Home</p>
                   </Link>
 
-                  <Link href="/challenges">
+                  <Link href="/challenges" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faCompass}
                      />
                      <p>Challenges</p>
                   </Link>
 
-                  <Link href="/challenges/0">
+                  <Link href="/challenges/0" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faRankingStar}
                      />
                      <p>Leaderboards</p>
                   </Link>
 
-                  <Link href="/titles">
+                  <Link href="/titles" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faAward}
                      />
                      <p>Titles</p>
                   </Link>
 
-                  <Link href="/communities">
+                  <Link href="/communities" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faUserGroup}
                      />
                      <p>Communities</p>
                   </Link>
 
-                  <Link href="/settings">
+                  <Link href="/settings" prefetch={false}>
                      <FontAwesomeIcon
                         icon={faGear}
                      />
@@ -131,4 +181,6 @@ export class Header extends Component {
       </>;
 
    }
-}
+}
+
+export default withRouter(Header);
diff --git a/layouts/Layout.js b/layouts/Layout.js
@@ -1,4 +1,4 @@
-import { Header } from "./Header";
+import Header from "./Header";
 import css from "challenges/styles/layout.module.scss";
 
 export default function Layout(props) {

diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -6,7 +6,7 @@ $selected: rgb(13, 189, 255) !default;
 $light0: #fff !default;
 $light1: #fff !default;
 $light2: rgb(206, 206, 210) !default;
-$light3: rgb(200, 200, 204) !default;
+$light3: rgb(180, 180, 184) !default;
 
 /* color variables */
 $win: #4287f5 !default;

diff --git a/styles/header.module.scss b/styles/header.module.scss
@@ -78,23 +78,33 @@ $width: 230px;
          padding: 20px 10px;
          overflow: hidden;
 
-         color: $light2;
+         color: $light3;
          white-space: nowrap;
 
          transition: .25s color;
 
+         &.active {
+
+            p,
+            svg {
+               color: $light0;
+            }
+         }
+
+
          p {
             padding: 0;
             margin: 0;
             flex: 1;
-            color: $light2;
+            color: $light3;
             font-size: 1rem;
             padding-left: 10px;
 
             transition: .25s color;
          }
 
          svg {
+            color: $light3;
             text-align: center;
             width: 2rem;
          }