From db9f5f1c5c90b5dfc6b0675c96edfab0ae4c3843 Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Thu, 26 Aug 2021 16:23:47 -0400
Subject: [PATCH] Fix navbar highlight for pages with Organized Content

---
 components/Navbar.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index ab3e1c1d..2a323eb8 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -9,9 +9,11 @@ import styles from "./Navbar.module.css";
 type Menu = {
   name: string;
   route: string;
+  hasSubsections?: boolean; // true for pages that use Organized Content
   submenu?: {
     name: string;
     route: string;
+    hasSubsections?: boolean;
   }[];
 }[];
 
@@ -35,10 +37,12 @@ const menu: Menu = [
       {
         name: "Constitution",
         route: "/about/constitution",
+        hasSubsections: true,
       },
       {
         name: "Code of Conduct",
         route: "/about/code-of-conduct",
+        hasSubsections: true,
       },
       {
         name: "Our Supporters",
@@ -57,14 +61,17 @@ const menu: Menu = [
   {
     name: "Resources",
     route: "/resources/services",
+    hasSubsections: true,
     submenu: [
       {
         name: "Services",
         route: "/resources/services",
+        hasSubsections: true,
       },
       {
         name: "Machine Usage",
         route: "/resources/machine-usage-agreement",
+        hasSubsections: true,
       },
       {
         name: "Tech Talks",
@@ -128,6 +135,7 @@ export function Navbar() {
                   <NavItem
                     name={item.name}
                     route={item.route}
+                    hasSubsections={item.hasSubsections}
                     submenu={item.submenu}
                     mainRouteActive={state.activeSubmenus.has(
                       getMainRoute(item.route)
@@ -187,9 +195,11 @@ function reducer(state: MobileState, action: MobileAction): MobileState {
 interface NavItemProps {
   name: string;
   route: string;
+  hasSubsections?: boolean;
   submenu?: {
     name: string;
     route: string;
+    hasSubsections?: boolean;
   }[];
   mainRouteActive: boolean;
   onToggle(route: string): void;
@@ -201,7 +211,8 @@ function NavItem(props: NavItemProps) {
   const isCurrentPage =
     router.pathname === props.route ||
     (props.submenu != null &&
-      router.pathname.startsWith(getMainRoute(props.route)));
+      router.pathname.startsWith(getMainRoute(props.route))) ||
+    (props.hasSubsections != null && router.pathname.startsWith(props.route));
   const isExternalLink =
     props.route.includes("http://") || props.route.includes("https://");
 
@@ -259,6 +270,7 @@ function NavItem(props: NavItemProps) {
                   <NavItem
                     name={item.name}
                     route={item.route}
+                    hasSubsections={item.hasSubsections}
                     mainRouteActive={props.mainRouteActive}
                     onClose={() => props.onClose()}
                     onToggle={(route) => props.onToggle(route)}