Merge pull request #134 from springload/feature/highlight-current-nav…

…-item-fed FED - highlight current section/item in main nav
springload · Jul 7, 2024 · c3139d4 · c3139d4
2 parents 5d98587 + e0092a5
commit c3139d4
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/cdhweb/static_src/components/MainNavDesktop/MainNavDesktop.mount.tsx b/cdhweb/static_src/components/MainNavDesktop/MainNavDesktop.mount.tsx
@@ -22,13 +22,14 @@ const initComponent: InitComponent = (componentEl) => {
   const primaryNavDataSimplified: MainNavDataPrimarySimplified =
     primaryNavData.primary_nav_data.primary_nav.l1_menu_items;
 
-  const searchUrl = componentEl.getAttribute('data-search-url');
+  const searchUrl = componentEl.getAttribute('data-search-url') || '/search';
 
   const root = createRoot(componentEl);
   root.render(
     <MainNavDesktop
       primaryNavData={primaryNavDataSimplified}
-      searchUrl={searchUrl || '/search'}
+      searchUrl={searchUrl}
+      isSearchPage={window.location.pathname === searchUrl}
     />,
   );
 

diff --git a/cdhweb/static_src/components/MainNavDesktop/MainNavDesktop.tsx b/cdhweb/static_src/components/MainNavDesktop/MainNavDesktop.tsx
@@ -5,11 +5,13 @@ import { MouseEvent, createRef, useEffect, useRef, useState } from 'react';
 type DesktopMenuDataType = {
   primaryNavData: MainNavDataPrimarySimplified;
   searchUrl: string;
+  isSearchPage: boolean;
 };
 
 const DesktopMenu = ({
   primaryNavData,
   searchUrl,
+  isSearchPage,
 }: DesktopMenuDataType): JSX.Element => {
   const [currentOpenIndex, setCurrentOpenIndex] = useState(-1);
 
@@ -22,6 +24,7 @@ const DesktopMenu = ({
       overview: 'Search our website for people, projects, events or blogs.',
       l2_items: [],
       link_url: searchUrl,
+      is_current: isSearchPage,
     },
   ];
 
@@ -120,8 +123,6 @@ const DesktopMenu = ({
   return (
     <ul className="main-nav-desktop__list">
       {navDataPlusSearch.map((item, i) => (
-        // BED TODO! We'll need a isCurrentPage/isCurrentSection thing added to
-        // the data blob, to highlight the current menu item.
         <DesktopMenuItem
           key={i}
           item={item}

diff --git a/cdhweb/static_src/components/MainNavDesktop/MainNavDesktopItem.tsx b/cdhweb/static_src/components/MainNavDesktop/MainNavDesktopItem.tsx
@@ -93,8 +93,7 @@ const DesktopMenuItem = ({
           <button
             className={cx('main-nav-desktop__item', {
               'main-nav-desktop__item--open': isOpen,
-              // If/when we get isCurrentSection working (BED TODO)
-              // 'main-nav-desktop__item--current-section': isCurrentSection,
+              'main-nav-desktop__item--current-section': item.is_current,
             })}
             onClick={onClick}
             aria-controls={`${uniqueA11yId}_desktop`}
@@ -154,7 +153,12 @@ const DesktopMenuItem = ({
           )}
         </>
       ) : (
-        <a href={item.link_url} className="main-nav-desktop__item">
+        <a
+          href={item.link_url}
+          className={cx('main-nav-desktop__item', {
+            'main-nav-desktop__item--current-section': item.is_current,
+          })}
+        >
           <span>{item.title}</span>
         </a>
       )}

diff --git a/cdhweb/static_src/data-types.tsx b/cdhweb/static_src/data-types.tsx
@@ -25,6 +25,7 @@ export type MainNavItemPrimary = {
   link_url: string;
   l2_items: NavItem[];
   isSearch?: boolean;
+  is_current: boolean;
 };
 
 export type NavItem = {

diff --git a/cdhweb/static_src/global/components/main-nav-desktop.scss b/cdhweb/static_src/global/components/main-nav-desktop.scss
@@ -131,8 +131,10 @@
       border-bottom-color: var(--color-brand-120);
     }
   }
+}
 
-  // TODO current section, something similar to above
+.main-nav-desktop__item--current-section {
+  border-color: var(--color-brand-40);
 }
 
 .main-nav-desktop__dropdown-icon {

diff --git a/templates/includes/header.html b/templates/includes/header.html
@@ -38,7 +38,12 @@
                 <ul class="main-nav-desktop__list">
                     {% for item in primary_nav.l1_menu_items %}
                         <li>
-                            <a href="{{ item.link_url }}" class="main-nav-desktop__item {% if request.path|starts_with:item.link_url %} active {% endif %}" >
+                            <a href="{{ item.link_url }}" 
+                                class="main-nav-desktop__item 
+                                    {% if request.path|starts_with:item.link_url %}
+                                        main-nav-desktop__item--current-section
+                                    {% endif %}
+                            ">  
                                 <span>{{ item.title }}</span>
                                 {# Reserve space for dropdown icon, to stop jank when the React version replaces this version. #}
                                 {% if item.l2_items.all %}
@@ -48,7 +53,13 @@
                         </li>
                     {% endfor %}
                     <li>
-                        <a href="{% url 'search' %}" class="main-nav-desktop__item">
+                        {% url 'search' as search_url %}
+                        <a href="{{ search_url }}" 
+                            class="main-nav-desktop__item
+                            {% if request.path|starts_with:search_url %}
+                                main-nav-desktop__item--current-section
+                            {% endif %}
+                        ">   
                             <span>Search</span>
                             {% include 'includes/svg.html' with sprite="two-tone" svg="search" classes="main-nav-desktop__search-icon" %}
                         </a>