Support for empty navbar actions/menu links (#110)

Author: marcoacierno

biome.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
+      "complexity": {
+        "noForEach": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": [
+      "**/lodash-is-equal.ts",
+      ".cache/",
+      ".docz/",
+      "public/",
+      "src/generated",
+      "_schema.json",
+      "package.json",
+      "src/types.tsx"
+    ]
+  },
+  "javascript": {
+    "jsxRuntime": "reactClassic"
+  }
+}

package.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
+    "@biomejs/biome": "^1.8.0",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@storybook/addon-essentials": "^6.5.16",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import React from "react";
 
 import { Container } from "../container";
 import { ActionItem } from "./action-item";
-import { Action } from "./types";
+import type { Action } from "./types";
 
 type HeaderBarProps = {
   hidden?: boolean;

src/navbar/header-bar.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Separator } from "../separator";
+import { Container } from "../container";
 import { Heading } from "../heading";
 import { Link } from "../link";
-import { Link as LinkType } from "./types";
+import { Separator } from "../separator";
 import { Text } from "../text";
-import { Container } from "../container";
+import type { Link as LinkType } from "./types";
 
 export const Menu = ({
   mainLinks,
@@ -20,49 +20,60 @@ export const Menu = ({
 
   return (
     <div>
-      <Separator />
-      <Container className="py-8 lg:py-20">
-        <div className="grid grid-cols-1 gap-4 lg:gap-14 lg:grid-cols-2">
-          {mainLinksSplit
-            .filter((split) => split.length > 0)
-            .map((split, index) => (
-              <ul
-                className="grid grid-cols-1 content-start gap-4 lg:gap-6"
-                key={index}
-              >
-                {split.map(({ text, link }) => (
-                  <li key={`${text}${link}`}>
-                    <Link hoverColor="caramel" href={link}>
-                      <Heading color="none" size="display2">
-                        {text}
-                      </Heading>
-                    </Link>
-                  </li>
+      {mainLinks.length > 0 && (
+        <>
+          <Separator />
+          <Container className="py-8 lg:py-20">
+            <div className="grid grid-cols-1 gap-4 lg:gap-14 lg:grid-cols-2">
+              {mainLinksSplit
+                .filter((split) => split.length > 0)
+                .map((split, index) => (
+                  <ul
+                    className="grid grid-cols-1 content-start gap-4 lg:gap-6"
+                    key={index}
+                  >
+                    {split.map(({ text, link }) => (
+                      <li key={`${text}${link}`}>
+                        <Link hoverColor="caramel" href={link}>
+                          <Heading color="none" size="display2">
+                            {text}
+                          </Heading>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
                 ))}
-              </ul>
-            ))}
-        </div>
-      </Container>
-      <Separator />
-      <Container className="py-8 lg:py-10">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 lg:gap-14">
-          {secondaryLinksSplit
-            .filter((split) => split.length > 0)
-            .map((secondaryLinks, index) => (
-              <ul key={index} className="grid grid-cols-1 gap-4 content-start">
-                {secondaryLinks.map(({ link, text }) => (
-                  <li key={`${text}${link}`}>
-                    <Link hoverColor="caramel" href={link}>
-                      <Heading color="none" size={4}>
-                        {text}
-                      </Heading>
-                    </Link>
-                  </li>
+            </div>
+          </Container>
+        </>
+      )}
+      {secondaryLinks.length > 0 && (
+        <>
+          <Separator />
+          <Container className="py-8 lg:py-10">
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 lg:gap-14">
+              {secondaryLinksSplit
+                .filter((split) => split.length > 0)
+                .map((secondaryLinks, index) => (
+                  <ul
+                    key={index}
+                    className="grid grid-cols-1 gap-4 content-start"
+                  >
+                    {secondaryLinks.map(({ link, text }) => (
+                      <li key={`${text}${link}`}>
+                        <Link hoverColor="caramel" href={link}>
+                          <Heading color="none" size={4}>
+                            {text}
+                          </Heading>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
                 ))}
-              </ul>
-            ))}
-        </div>
-      </Container>
+            </div>
+          </Container>
+        </>
+      )}
       {bottomBarLink && (
         <>
           <Separator />