From 0ffbe999c0cb4107b796f0894601eeb0ff4f26a5 Mon Sep 17 00:00:00 2001
From: MadelineLei1 <mlei40@stuy.edu>
Date: Sat, 25 Nov 2023 18:10:00 -0500
Subject: [PATCH 1/2] added scrollability, but some issues with popout menus

---
 components/Sidebar.tsx    | 102 +++++++++++++++++++-------------------
 styles/Sidebar.module.css |  15 +++++-
 2 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 6ccab6f..b69ac2a 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -100,57 +100,59 @@ const Sidebar = (props: { showSidebar: boolean }) => {
 					<span className={styles.maindepartment}>
 						<Link href="/department/ae">Arts & Entertainment</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/ae/fashion">Fashion</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/art">Art</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/culture">Culture</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/film">Film</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/food">Food</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/literature">
-								Literature
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/music">Music</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/television">
-								Television
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/theater">Theater</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/thinkpiece">
-								Thinkpiece
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/sing!">Sing!</Link>
-						</span>
-						<span>
-							<Link href="/department/ae/stc">STC!</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/ae/fashion">Fashion</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/art">Art</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/culture">Culture</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/film">Film</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/food">Food</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/literature">
+									Literature
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/music">Music</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/television">
+									Television
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/theater">Theater</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/thinkpiece">
+									Thinkpiece
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/sing!">Sing!</Link>
+							</span>
+							<span>
+								<Link href="/department/ae/stc">STC!</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
 
 				<div className={styles.department}>
diff --git a/styles/Sidebar.module.css b/styles/Sidebar.module.css
index dcbec8e..b39302a 100644
--- a/styles/Sidebar.module.css
+++ b/styles/Sidebar.module.css
@@ -14,8 +14,15 @@
 	font-family: var(--secondary-font);
 	padding-bottom: 10px;
 	color: var(--primary-immutable);
+	overflow-y: auto;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
 }
 
+.sidebar::-webkit-scrollbar {
+	display: none;
+  }
+
 #sidebar span {
 	margin-top: 5px;
 	margin-bottom: 5px;
@@ -28,6 +35,12 @@
 	justify-content: center;
 }
 
+.subdepartment_wrapper {
+	position: absolute;
+	left: 100%;
+	/* top: 47px; */
+}
+
 .subdepartment {
 	position: absolute;
 	left: 100%;
@@ -94,7 +107,7 @@
 #right_arrow {
 	position: absolute;
 	margin-top: 0.8rem;
-	margin-left: 220px;
+	margin-left: -20px;
 }
 
 .department:hover #right_arrow {

From b70f5036951db80b49cd69dd55a87e298c938020 Mon Sep 17 00:00:00 2001
From: MadelineLei1 <mlei40@stuy.edu>
Date: Sat, 25 Nov 2023 21:01:12 -0500
Subject: [PATCH 2/2] Add sidebar to scrollbar

Add invisible scrollbar to the sidebar for smaller viewports. Originally
was going to scale the text size, but that caused a lot of problems
(i.e. the text would be way too small to read)
  - Still some issues with the submenus, as they do not scroll with the
    rest of the content
---
 components/Sidebar.tsx | 177 ++++++++++++++++++++++-------------------
 1 file changed, 93 insertions(+), 84 deletions(-)

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index b69ac2a..a81bed7 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -28,70 +28,75 @@ const Sidebar = (props: { showSidebar: boolean }) => {
 					<span className={styles.maindepartment}>
 						<Link href="/department/news">News</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/news/campaign-coverage">
-								Campaign Coverage
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/news/israel-hamas-war">
-								Israel-Hamas War
-							</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/news/campaign-coverage">
+									Campaign Coverage
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/news/israel-hamas-war">
+									Israel-Hamas War
+								</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
 
 				<div className={styles.department}>
 					<span className={styles.maindepartment}>
 						<Link href="/department/features">Features</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/opinions/voices">
-								VOICES
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/opinions/9-11">9/11</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/opinions/voices">
+									VOICES
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/opinions/9-11">9/11</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
 
 				<div className={styles.department}>
 					<span className={styles.maindepartment}>
 						<Link href="/department/opinions">Opinions</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/opinions/staff-editorials">
-								Staff Editorials
-							</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/opinions/staff-editorials">
+									Staff Editorials
+								</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
-
 				<span className={styles.maindepartment}>
 					<Link href="/department/science">Science</Link>
 				</span>
@@ -159,50 +164,54 @@ const Sidebar = (props: { showSidebar: boolean }) => {
 					<span className={styles.maindepartment}>
 						<Link href="/department/humor">Humor</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/humor/disrespectator">
-								Disrespectator
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/humor/spooktator">
-								Spooktator
-							</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/humor/disrespectator">
+									Disrespectator
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/humor/spooktator">
+									Spooktator
+								</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
 
 				<div className={styles.department}>
 					<span className={styles.maindepartment}>
 						<Link href="/department/sports">Sports</Link>
 					</span>
-					<div className={styles.subdepartment}>
-						<span>
-							<Link href="/department/sports/professional-sports">
-								Professional Sports
-							</Link>
-						</span>
-						<span>
-							<Link href="/department/sports/sports-at-stuyvesant">
-								Sports At Stuy
-							</Link>
-						</span>
+					<div className={styles.subdepartment_wrapper}>
+						<div className={styles.subdepartment}>
+							<span>
+								<Link href="/department/sports/professional-sports">
+									Professional Sports
+								</Link>
+							</span>
+							<span>
+								<Link href="/department/sports/sports-at-stuyvesant">
+									Sports At Stuy
+								</Link>
+							</span>
+						</div>
+						<Image
+							src="/images/right-arrow.svg"
+							width={10}
+							alt="right-arrow"
+							height={10}
+							id={styles.right_arrow}
+						/>
 					</div>
-					<Image
-						src="/images/right-arrow.svg"
-						width={10}
-						alt="right-arrow"
-						height={10}
-						id={styles.right_arrow}
-					/>
 				</div>
 
 				<span className={styles.maindepartment}>