Fix navbar highlight for pages with Organized Content

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)}