From 104f1e78313911157dafd751c88252feb947c37c Mon Sep 17 00:00:00 2001
From: Bin Lin Zh <binlinzh@gmail.com>
Date: Sun, 18 Jun 2023 14:29:38 -0400
Subject: [PATCH] Replace navbar on mobile for more screen estate.

The original header was changed from sticky to static for small screen
users. A new fixed position collapsible navbar replaced the
original navbar.
---
 components/Sidenav.tsx    | 54 +++++++++++++++++++++++++
 pages/_app.tsx            |  4 ++
 styles/Navbar.module.css  |  3 ++
 styles/Sidenav.module.css | 85 +++++++++++++++++++++++++++++++++++++++
 styles/globals.css        |  8 ++++
 5 files changed, 154 insertions(+)
 create mode 100644 components/Sidenav.tsx
 create mode 100644 styles/Sidenav.module.css

diff --git a/components/Sidenav.tsx b/components/Sidenav.tsx
new file mode 100644
index 0000000..5808d9f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 38a0fbc..d134f01 100644
--- a/pages/_app.tsx
+++ b/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>
diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
index 8106bd6..49340fe 100644
--- a/styles/Navbar.module.css
+++ b/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;
 	}
 }
 
diff --git a/styles/Sidenav.module.css b/styles/Sidenav.module.css
new file mode 100644
index 0000000..16ec47b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index b8d4090..57a0ea8 100644
--- a/styles/globals.css
+++ b/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));