From 000db26866e977d1c29029788420900ea4db71f4 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Mon, 29 Dec 2025 11:06:23 -0500
Subject: [PATCH] fix(navbar): don't show navitems if none provided

---
 packages/ui-components/package.json           |  2 +-
 .../src/Containers/NavBar/index.stories.tsx   | 17 +++++----
 .../src/Containers/NavBar/index.tsx           | 35 ++++++++++---------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 5bef6a4d0e152..cb1f8908e515b 100644
--- a/packages/ui-components/package.json
+++ b/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": {
     "./*": [
diff --git a/packages/ui-components/src/Containers/NavBar/index.stories.tsx b/packages/ui-components/src/Containers/NavBar/index.stories.tsx
index 005c8f40da103..2c055e4a43e79 100644
--- a/packages/ui-components/src/Containers/NavBar/index.stories.tsx
+++ b/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;
diff --git a/packages/ui-components/src/Containers/NavBar/index.tsx b/packages/ui-components/src/Containers/NavBar/index.tsx
index 5b5a6521fe3ba..5c5f6891f1960 100644
--- a/packages/ui-components/src/Containers/NavBar/index.tsx
+++ b/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,7 +61,7 @@ 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)}
@@ -69,21 +69,22 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
         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>