From 8f8638f37d1c1e2becd6361eef9cb951b8b4ee2b Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:27:32 +0200
Subject: [PATCH] fix(navbar): no item position

---
 .../src/Containers/NavBar/index.module.css    | 18 +++---
 .../src/Containers/NavBar/index.stories.tsx   | 64 ++++++++++++++++---
 .../src/Containers/NavBar/index.tsx           | 18 +++---
 3 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/packages/ui-components/src/Containers/NavBar/index.module.css b/packages/ui-components/src/Containers/NavBar/index.module.css
index 99775c5f02fe4..7d4bdb55ffad1 100644
--- a/packages/ui-components/src/Containers/NavBar/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/index.module.css
@@ -39,16 +39,17 @@
       }
 
       .sidebarItemTogglerLabel {
-        @apply block
+        @apply ml-auto
+          block
           cursor-pointer
-          xl:hidden;
-
-        .navInteractionIcon {
-          @apply size-6;
-        }
+          xl:hidden; /* Push toggler to the right if Logo exists */
       }
     }
 
+    .navInteractionIcon {
+      @apply size-6;
+    }
+
     .sidebarItemToggler {
       @apply absolute
         right-4
@@ -62,11 +63,11 @@
     .main {
       @apply flex-1
         flex-col
-        justify-between
         gap-4
         xl:flex
         xl:flex-row
-        xl:items-center;
+        xl:items-center
+        xl:justify-between;
     }
 
     .navItems {
@@ -86,6 +87,7 @@
 
     .actionsWrapper {
       @apply flex
+        w-full
         flex-row
         flex-wrap
         items-center
diff --git a/packages/ui-components/src/Containers/NavBar/index.stories.tsx b/packages/ui-components/src/Containers/NavBar/index.stories.tsx
index 2c055e4a43e79..1f653bfda8740 100644
--- a/packages/ui-components/src/Containers/NavBar/index.stories.tsx
+++ b/packages/ui-components/src/Containers/NavBar/index.stories.tsx
@@ -1,3 +1,5 @@
+import Logo from '#ui/Common/NodejsLogo';
+import SearchModal from '#ui/Common/Search/Modal';
 import NavBar from '#ui/Containers/NavBar';
 
 import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
@@ -5,17 +7,55 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 type Story = StoryObj<typeof NavBar>;
 type Meta = MetaObj<typeof NavBar>;
 
-const common = {
-  as: 'a',
-  Logo: 'a',
-  pathname: '/',
+export const Default: Story = {
+  args: {
+    as: 'a',
+    Logo,
+    pathname: '/',
+    children: <SearchModal client={null} placeholder="Search the docs..." />,
+    navItems: [
+      {
+        text: 'Learn',
+        link: '/',
+      },
+      {
+        text: 'About',
+        link: '/about',
+      },
+      {
+        text: 'Docs',
+        link: '/docs',
+      },
+      {
+        text: 'Download',
+        link: '/download',
+      },
+      {
+        text: 'Blog',
+        link: '/blog',
+      },
+      {
+        text: 'Certification',
+        link: 'https://openjsf.org/certification',
+      },
+    ],
+  },
+};
 
-  children: <a>Some other child</a>,
-} as const;
+export const NoNavItems: Story = {
+  args: {
+    as: 'a',
+    Logo,
+    pathname: '/',
+    children: <SearchModal client={null} placeholder="Search the docs..." />,
+  },
+};
 
-export const Default: Story = {
+export const NoLogo: Story = {
   args: {
-    ...common,
+    as: 'a',
+    pathname: '/',
+    children: <SearchModal client={null} placeholder="Search the docs..." />,
     navItems: [
       {
         text: 'Learn',
@@ -45,6 +85,12 @@ export const Default: Story = {
   },
 };
 
-export const NoNavItems: Story = { args: common };
+export const NoLogoNoNavItems: Story = {
+  args: {
+    as: 'a',
+    pathname: '/',
+    children: <SearchModal client={null} placeholder="Search the docs..." />,
+  },
+};
 
 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 4f4c179b5018a..d91ace9c4c680 100644
--- a/packages/ui-components/src/Containers/NavBar/index.tsx
+++ b/packages/ui-components/src/Containers/NavBar/index.tsx
@@ -39,7 +39,7 @@ type NavbarProps = {
     link: string;
     target?: HTMLAttributeAnchorTarget | undefined;
   }>;
-  Logo: ElementType;
+  Logo?: ElementType;
   as: LinkLike;
   pathname: string;
   sidebarItemTogglerAriaLabel: string;
@@ -61,13 +61,15 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
     <nav className={styles.container}>
       <div className={styles.innerContainer}>
         <div className={styles.nodeIconAndMobileItemsToggler}>
-          <Component
-            className={styles.nodeIconWrapper}
-            href="/"
-            aria-label="Home"
-          >
-            <Logo />
-          </Component>
+          {Logo && (
+            <Component
+              className={styles.nodeIconWrapper}
+              href="/"
+              aria-label="Home"
+            >
+              <Logo />
+            </Component>
+          )}
 
           <Label.Root
             className={styles.sidebarItemTogglerLabel}