isaacbythewood.com-nextjs

 1import React, { useState, useEffect } from "react";
 2import PropTypes from "prop-types";
 3import styles from "@styles/components/sidebar.module.css";
 4import Link from "next/link";
 5import { withRouter } from "next/router";
 6
 7const Sidebar = ({ router }) => {
 8  const [current, setCurrent] = useState("000");
 9
10  useEffect(() => {
11    const handleRouteChange = (url) => {
12      switch (url) {
13        case "/":
14          setCurrent("000");
15          break;
16        case "/about":
17          setCurrent("001");
18          break;
19        case "/code":
20          setCurrent("002");
21          break;
22        case "/art":
23          setCurrent("003");
24          break;
25        case "/contact":
26          setCurrent("004");
27          break;
28      }
29    };
30    handleRouteChange(router.pathname);
31    router.events.on("routeChangeComplete", handleRouteChange);
32    return () => {
33      router.events.off("routeChangeComplete", handleRouteChange);
34    };
35  }, []);
36
37  return (
38    <nav className={styles.nav}>
39      <Link href="/" className={styles.navLogo} aria-label="Back to home">
40        <span aria-hidden="true" />
41      </Link>
42      <Link href="/contact" className={styles.navContact}>
43        Get in touch
44      </Link>
45      <div className={styles.navCurrent}>{current}</div>
46    </nav>
47  );
48};
49
50Sidebar.propTypes = {
51  router: PropTypes.object,
52};
53
54export default withRouter(Sidebar);