fix(navbar): no item position

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

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

@@ -1,21 +1,61 @@
+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';
 
 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;

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}