fix(navbar): don't show navitems if none provided (nodejs#8467)

Author: avivkeller

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "type": "module",
   "exports": {
     "./*": [

packages/ui-components/src/Containers/NavBar/index.stories.tsx

@@ -5,14 +5,17 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 type Story = StoryObj<typeof NavBar>;
 type Meta = MetaObj<typeof NavBar>;
 
-export const Default: Story = {
-  args: {
-    as: 'a',
-    Logo: 'a',
-    pathname: '/',
+const common = {
+  as: 'a',
+  Logo: 'a',
+  pathname: '/',
 
-    children: <a>Some other child</a>,
+  children: <a>Some other child</a>,
+} as const;
 
+export const Default: Story = {
+  args: {
+    ...common,
     navItems: [
       {
         text: 'Learn',
@@ -42,4 +45,6 @@ export const Default: Story = {
   },
 };
 
+export const NoNavItems: Story = { args: common };
+
 export default { component: NavBar } as Meta;

packages/ui-components/src/Containers/NavBar/index.tsx

@@ -22,7 +22,7 @@ const navInteractionIcons = {
 };
 
 type NavbarProps = {
-  navItems: Array<{
+  navItems?: Array<{
     text: FormattedMessage;
     link: string;
     target?: HTMLAttributeAnchorTarget | undefined;
@@ -61,29 +61,30 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
       </div>
 
       <input
-        className={classNames(['peer', style.sidebarItemToggler])}
+        className={classNames('peer', style.sidebarItemToggler)}
         id="sidebarItemToggler"
         type="checkbox"
         onChange={e => setIsMenuOpen(() => e.target.checked)}
         aria-label={sidebarItemTogglerAriaLabel}
         tabIndex={-1}
       />
 
-      <div className={`${style.main} hidden peer-checked:flex`}>
-        <div className={style.navItems}>
-          {navItems.map(({ text, link, target }) => (
-            <NavItem
-              pathname={pathname}
-              as={Component}
-              key={link}
-              href={link}
-              target={target}
-            >
-              {text}
-            </NavItem>
-          ))}
-        </div>
-
+      <div className={classNames(style.main, `hidden peer-checked:flex`)}>
+        {navItems && (
+          <div className={style.navItems}>
+            {navItems.map(({ text, link, target }) => (
+              <NavItem
+                pathname={pathname}
+                as={Component}
+                key={link}
+                href={link}
+                target={target}
+              >
+                {text}
+              </NavItem>
+            ))}
+          </div>
+        )}
         <div className={style.actionsWrapper}>{children}</div>
       </div>
     </nav>