Replace navbar on mobile for more screen estate.

components/Sidenav.tsx

@@ -0,0 +1,54 @@
+import styles from "../styles/Sidenav.module.css";
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+
+const links = [
+ {label: 'News', path: '/department/news'}, 
+ {label: 'Features', path: '/department/features'},
+ {label: 'Opinions', path: '/department/opinions'},
+ {label: 'Science', path: '/department/science'},
+ {label: 'Arts & Entertainment', path: '/department/ae'},
+ {label: 'Humor', path: '/department/humor'},
+ {label: 'Sports', path: '/department/sports'},
+ {label: 'Spec+', path: '/department/spec-plus'},
+ {label: 'Recruitments', path: '/about/recruitments'},
+ ];
+
+const Sidenav = () => {
+ const [viewSubSection, setViewSubSection] = useState(false);
+ function toggleMenu() {
+ setViewSubSection(!viewSubSection);
+ }
+
+ return (
+ <div id={styles.nav_parent}>
+ <nav id={styles.nav}>
+ <div
+ id={styles.hamburgerMenu}
+ className="button"
+ onClick={toggleMenu}
+ >
+ <Image
+ src="/images/hamburger-menu.svg"
+ width={30}
+ height={30}
+ id={styles.hamburgerMenu}
+ className="button"
+ alt="Button to view the departments"
+ />
+ </div>
+ </nav>
+ <div
+ id={styles.sidenav}
+ className={viewSubSection ? "" : styles.hide}
+ >
+
+ {links.map ((i) => {return <Link href={i.path}> {i.label}</Link>})} 
+
+ </div>
+ </div>
+ );
+};
+
+export default Sidenav;

pages/_app.tsx

@@ -4,6 +4,7 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Script from "next/script";
 import Head from "next/head";
+import Sidenav from "../components/Sidenav";
 
 function MyApp(props: AppProps) {
  let { Component, pageProps } = props;
@@ -16,6 +17,9 @@ function MyApp(props: AppProps) {
  <div id="navbar">
  <Navbar />
  </div>
+ <div id="sidenav">
+ <Sidenav />
+ </div>
  <div id="main">
  <Component {...pageProps} />
  </div>

styles/Navbar.module.css

@@ -113,6 +113,7 @@
 
  #hamburgerMenu {
  display: block;
+ display: none;
  }
 
  .hide {
@@ -121,12 +122,14 @@
 
  #department_bar {
  flex-direction: column;
+ display: none;
  }
 
  #department_bar span {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1.2rem;
+ display: none;
  }
 }
 

styles/Sidenav.module.css

@@ -0,0 +1,85 @@
+#nav_parent {
+ width: 100%;
+ background-color: var(--primary-nav);
+}
+
+#nav {
+ width: 100%;
+ height: 40px;
+ padding: 1px 14px;
+ margin-top: -50px;
+
+ grid-template-columns: 48px 250px 120px 48px 48px;
+ grid-template-rows: 100%;
+ column-gap: 2rem;
+
+ display: fixed;
+ align-items: center;
+ overflow: hidden;
+}
+
+#hamburgerMenu {
+ display: none;
+ background: var(--secondary-nav);
+ cursor: pointer;
+ padding: 2px;
+ border-radius: 5px;
+ position: fixed;
+ z-index: 1;
+}
+
+#hamburgerMenu:hover,
+#subscribe:hover,
+#colorModeToggle:hover,
+#searchButton:hover,
+.clickable_nav_element:hover {
+ opacity: 0.75;
+}
+#hamburgerMenu:active,
+#subscribe:active,
+#colorModeToggle:active,
+#searchButton:active,
+.clickable_nav_element:active {
+ opacity: 0.5;
+}
+
+#nav {
+ grid-template-columns: 48px calc(100% - 188px) 56px 56px;
+ column-gap: 1.5rem;
+}
+
+#hamburgerMenu {
+ display: block;
+}
+
+.hide {
+ display: none !important;
+}
+
+.clickable_nav_element {
+ cursor: pointer;
+}
+
+
+#sidenav {
+ background-color: var(--secondary);
+ position: fixed;
+ opacity: 1;
+ border-radius: 10px;
+ z-index: 1;
+}
+
+#sidenav a {
+ display: block;
+ color: var(--primary);
+ padding: 8px;
+ text-decoration: none;
+ font-family: var(--secondary-font);
+ border-radius: 10px;
+}
+
+#sidenav a:hover:not(.active) {
+ background-color: var(--secondary-nav);
+ color: white;
+ border-radius: 10px;
+}

styles/globals.css

@@ -109,6 +109,14 @@ a {
  z-index: 3;
 }
 
+@media screen and (max-width: 940px) {
+ #navbar {
+ position: static;
+ top: 0;
+ z-index: 3;
+ }
+}
+
 .link {
  background: linear-gradient(to right, var(--primary), var(--primary)),
  linear-gradient(to right, var(--accent), var(--accent));