feat: empty secondary header state

packages/visual-editor/locales/en/visual-editor.json

@@ -597,6 +597,7 @@
     "hiddenOnLivePage": "Secondary Footer (Hidden on live page)"
   },
   "secondaryHeader": "Secondary Header",
+  "secondaryHeaderHiddenOnLivePage": "Secondary Header (Hidden on live page)",
   "secondaryHeaderLinks": "Secondary Header Links",
   "section": "Section",
   "selectAnOption": "Select an option",

packages/visual-editor/src/components/header/HeaderLinks.tsx

@@ -73,7 +73,7 @@ const HeaderLinksComponent: PuckComponent<HeaderLinksProps> = ({
   parentData,
   puck,
 }) => {
-  const { i18n, t } = useTranslation();
+  const { i18n } = useTranslation();
   const streamDocument = useDocument();
   const MAX_VISIBLE = 5;
   const type = parentData?.type || "Primary";
@@ -98,30 +98,51 @@ const HeaderLinksComponent: PuckComponent<HeaderLinksProps> = ({
     />
   );
 
-  return data.links ? (
+  const validLinks = data.links?.filter((item) => !!item?.link) || [];
+
+  if (validLinks.length === 0) {
+    if (puck.isEditing) {
+      return (
+        <nav
+          aria-label={
+            type === "Primary"
+              ? pt("primaryHeaderLinks", "Primary Header Links")
+              : pt("secondaryHeaderLinks", "Secondary Header Links")
+          }
+        >
+          <ul className="flex flex-col md:flex-row gap-0 md:gap-6 md:items-center">
+            <li className="py-4 md:py-0">
+              <div className="h-5 min-w-[100px]" />
+            </li>
+          </ul>
+        </nav>
+      );
+    }
+    return <></>;
+  }
+
+  return (
     <nav
       aria-label={
         type === "Primary"
-          ? t("primaryHeaderLinks", "Primary Header Links")
-          : t("secondaryHeaderLinks", "Secondary Header Links")
+          ? pt("primaryHeaderLinks", "Primary Header Links")
+          : pt("secondaryHeaderLinks", "Secondary Header Links")
       }
     >
       <ul className="flex flex-col md:flex-row gap-0 md:gap-6 md:items-center">
-        {data.links
-          .filter((item) => !!item?.link)
-          .map((item, index) => {
-            const isOverflowed = isSecondary && index >= MAX_VISIBLE;
-            return (
-              <li
-                key={`${type.toLowerCase()}.${index}`}
-                className={`py-4 md:py-0 ${isOverflowed ? "md:hidden" : ""}`}
-              >
-                {renderLink(item, index, type.toLowerCase())}
-              </li>
-            );
-          })}
+        {validLinks.map((item, index) => {
+          const isOverflowed = isSecondary && index >= MAX_VISIBLE;
+          return (
+            <li
+              key={`${type.toLowerCase()}.${index}`}
+              className={`py-4 md:py-0 ${isOverflowed ? "md:hidden" : ""}`}
+            >
+              {renderLink(item, index, type.toLowerCase())}
+            </li>
+          );
+        })}
 
-        {isSecondary && data.links.length > MAX_VISIBLE && (
+        {isSecondary && validLinks.length > MAX_VISIBLE && (
           <li className="hidden md:block py-4 md:py-0">
             <DropdownMenu>
               <DropdownMenuTrigger className="flex flex-row md:items-center gap-4 justify-between w-full">
@@ -130,27 +151,20 @@ const HeaderLinksComponent: PuckComponent<HeaderLinksProps> = ({
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent className="bg-white border rounded shadow-md p-2 min-w-[200px] z-[9999]">
-                {data.links
-                  .filter((item) => !!item?.link)
-                  .slice(MAX_VISIBLE)
-                  .map((item, index) => (
-                    <DropdownMenuItem
-                      key={`overflow-${index}`}
-                      className="cursor-pointer p-2 text-body-sm-fontSize hover:bg-gray-100"
-                    >
-                      {renderLink(item, index + MAX_VISIBLE, "overflow")}
-                    </DropdownMenuItem>
-                  ))}
+                {validLinks.slice(MAX_VISIBLE).map((item, index) => (
+                  <DropdownMenuItem
+                    key={`overflow-${index}`}
+                    className="cursor-pointer p-2 text-body-sm-fontSize hover:bg-gray-100"
+                  >
+                    {renderLink(item, index + MAX_VISIBLE, "overflow")}
+                  </DropdownMenuItem>
+                ))}
               </DropdownMenuContent>
             </DropdownMenu>
           </li>
         )}
       </ul>
     </nav>
-  ) : puck.isEditing ? (
-    <div className="h-10" />
-  ) : (
-    <></>
   );
 };
 

packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx

@@ -13,6 +13,7 @@ import {
   parseDocumentForLanguageDropdown,
 } from "./languageDropdown";
 import { defaultHeaderLinkProps, HeaderLinksProps } from "./HeaderLinks";
+import { pt } from "../../utils/i18n/platform";
 
 export interface SecondaryHeaderSlotProps {
   data: {
@@ -96,7 +97,26 @@ const SecondaryHeaderSlotWrapper: PuckComponent<SecondaryHeaderSlotProps> = ({
   const showLanguageSelector =
     languageDropDownProps && languageDropDownProps.locales?.length > 1;
 
-  return data.show ? (
+  const { show } = data;
+
+  if (puck.isEditing && !show) {
+    return (
+      <div className="border-2 border-dashed border-gray-400 bg-gray-100 p-4 opacity-50 min-h-[60px] flex items-center justify-center cursor-pointer">
+        <p className="text-sm text-gray-600">
+          {pt(
+            "secondaryHeaderHiddenOnLivePage",
+            "Secondary Header (Hidden on live page)"
+          )}
+        </p>
+      </div>
+    );
+  }
+
+  if (!show) {
+    return <></>;
+  }
+
+  return (
     <PageSection
       maxWidth={parentStyles?.maxWidth}
       verticalPadding={"sm"}
@@ -108,10 +128,6 @@ const SecondaryHeaderSlotWrapper: PuckComponent<SecondaryHeaderSlotProps> = ({
         <LanguageDropdown {...languageDropDownProps} />
       )}
     </PageSection>
-  ) : puck.isEditing ? (
-    <div className="h-20" />
-  ) : (
-    <></>
   );
 };