From 21b9a55cbc61f7c91444f2ffc4f77d41a924b621 Mon Sep 17 00:00:00 2001
From: Boban <BobanL@users.noreply.github.com>
Date: Tue, 29 Aug 2023 12:54:56 -0400
Subject: [PATCH] hide header in list if empty (#6440)

---
 frontend/src/app/commonComponents/Header.tsx | 51 ++++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/commonComponents/Header.tsx b/frontend/src/app/commonComponents/Header.tsx
index 341d619bac..02a52f922c 100644
--- a/frontend/src/app/commonComponents/Header.tsx
+++ b/frontend/src/app/commonComponents/Header.tsx
@@ -149,23 +149,36 @@ const Header: React.FC<{}> = () => {
       key: "patient-nav-link",
     },
   ];
-  const mainNavList = (deviceType: string) =>
-    mainNavContent.map((item) => {
+  const mainNavList = (deviceType: "desktop" | "mobile") => {
+    let navList = mainNavContent
+      .map((item) => {
+        return (
+          item.displayPermissions && (
+            <li key={item.key} className="usa-nav__primary-item">
+              <LinkWithQuery
+                to={item.url}
+                onClick={() => setMenuVisible(false)}
+                className={item.className}
+                id={`${deviceType}-${item.key}`}
+              >
+                {item.displayText}
+              </LinkWithQuery>
+            </li>
+          )
+        );
+      })
+      .filter((item) => item);
+    if (deviceType === "mobile" && navList?.length > 0) {
       return (
-        <li key={item.key} className="usa-nav__primary-item">
-          {item.displayPermissions ? (
-            <LinkWithQuery
-              to={item.url}
-              onClick={() => setMenuVisible(false)}
-              className={item.className}
-              id={`${deviceType}-${item.key}`}
-            >
-              {item.displayText}
-            </LinkWithQuery>
-          ) : null}
-        </li>
+        <ul className="usa-nav__primary usa-accordion mobile-main-nav-container">
+          {navList}
+        </ul>
       );
-    });
+    } else if (deviceType === "desktop" && navList?.length > 0) {
+      return <ul className="usa-nav__primary usa-accordion">{navList}</ul>;
+    }
+  };
+
   const secondaryNavContent = [
     {
       url: "#",
@@ -331,9 +344,7 @@ const Header: React.FC<{}> = () => {
           >
             <FontAwesomeIcon icon={"window-close"} />
           </button>
-          <ul className="usa-nav__primary usa-accordion mobile-main-nav-container">
-            {mainNavList("mobile")}
-          </ul>
+          {mainNavList("mobile")}
           <ul className="usa-nav__primary usa-accordion mobile-secondary-nav-container">
             {secondaryNav("mobile")}
           </ul>
@@ -365,9 +376,7 @@ const Header: React.FC<{}> = () => {
         aria-label="Primary navigation"
         className="usa-nav prime-nav desktop-nav"
       >
-        <ul className="usa-nav__primary usa-accordion">
-          {mainNavList("desktop")}
-        </ul>
+        {mainNavList("desktop")}
         {facilities && facilities.length > 0 ? (
           <div className="prime-facility-select">
             <Dropdown