From a79111380707903fb8a6939a89a1bcff13708cd9 Mon Sep 17 00:00:00 2001
From: Mohamed Shams El-Deen <mohamedshamseldeen95@gmail.com>
Date: Mon, 20 Jul 2026 17:56:55 +0300
Subject: [PATCH] fix(ui): Move NavBar to dedicated component folder and make
 it sticky

---
 components/NavBar.jsx              | 41 ---------------------------
 components/NavBar/index.jsx        | 45 ++++++++++++++++++++++++++++++
 components/NavBar/index.module.css |  5 ++++
 layouts/Blog/index.jsx             |  2 +-
 layouts/PartialArticle/index.jsx   |  2 +-
 layouts/Post/index.jsx             |  2 +-
 scripts/html/doc-kit.config.mjs    |  2 +-
 7 files changed, 54 insertions(+), 45 deletions(-)
 delete mode 100644 components/NavBar.jsx
 create mode 100644 components/NavBar/index.jsx
 create mode 100644 components/NavBar/index.module.css

diff --git a/components/NavBar.jsx b/components/NavBar.jsx
deleted file mode 100644
index 68cfd085..00000000
--- a/components/NavBar.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
-import NavBar from '@node-core/ui-components/Containers/NavBar';
-import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
-import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
-
-import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/SearchBox';
-import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
-import { navbar } from '#theme/site';
-import { baseURL } from '#theme/config';
-import { toPublicLink } from '../utils/helpers/urls.mjs';
-import Logo from '#theme/Logo';
-
-const versionBase = new URL(baseURL).pathname;
-
-/**
- * NavBar component that displays the headings, search, etc.
- */
-export default ({ metadata }) => {
-  const [themePreference, setThemePreference] = useTheme();
-
-  return (
-    <NavBar
-      Logo={Logo}
-      sidebarItemTogglerAriaLabel="Toggle navigation menu"
-      navItems={navbar}
-      pathname={toPublicLink(metadata.path, versionBase)}
-    >
-      <SearchBox pathname={metadata.path} />
-      <ThemeToggle
-        onChange={setThemePreference}
-        currentTheme={themePreference}
-      />
-      <a
-        href="https://github.com/webpack/webpack"
-        className={styles.ghIconWrapper}
-      >
-        <GitHubIcon />
-      </a>
-    </NavBar>
-  );
-};
diff --git a/components/NavBar/index.jsx b/components/NavBar/index.jsx
new file mode 100644
index 00000000..8e208e87
--- /dev/null
+++ b/components/NavBar/index.jsx
@@ -0,0 +1,45 @@
+import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
+import NavBar from '@node-core/ui-components/Containers/NavBar';
+import uiStyles from '@node-core/ui-components/Containers/NavBar/index.module.css';
+import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
+
+import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/SearchBox';
+import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
+import { navbar } from '#theme/site';
+import { baseURL } from '#theme/config';
+import { toPublicLink } from '../../utils/helpers/urls.mjs';
+import Logo from '#theme/Logo';
+
+import localStyles from './index.module.css';
+
+const versionBase = new URL(baseURL).pathname;
+
+/**
+ * NavBar component that displays the headings, search, etc.
+ */
+export default ({ metadata }) => {
+  const [themePreference, setThemePreference] = useTheme();
+
+  return (
+    <div className={localStyles.navbarWrapper}>
+      <NavBar
+        Logo={Logo}
+        sidebarItemTogglerAriaLabel="Toggle navigation menu"
+        navItems={navbar}
+        pathname={toPublicLink(metadata.path, versionBase)}
+      >
+        <SearchBox pathname={metadata.path} />
+        <ThemeToggle
+          onChange={setThemePreference}
+          currentTheme={themePreference}
+        />
+        <a
+          href="https://github.com/webpack/webpack"
+          className={uiStyles.ghIconWrapper}
+        >
+          <GitHubIcon />
+        </a>
+      </NavBar>
+    </div>
+  );
+};
diff --git a/components/NavBar/index.module.css b/components/NavBar/index.module.css
new file mode 100644
index 00000000..82d1dc47
--- /dev/null
+++ b/components/NavBar/index.module.css
@@ -0,0 +1,5 @@
+.navbarWrapper {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
diff --git a/layouts/Blog/index.jsx b/layouts/Blog/index.jsx
index ee2e1e98..3be7a4ba 100644
--- a/layouts/Blog/index.jsx
+++ b/layouts/Blog/index.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import BasePagination from '@node-core/ui-components/Common/BasePagination';
 
-import NavBar from '../../components/NavBar.jsx';
+import NavBar from '../../components/NavBar/index.jsx';
 import Footer from '../../components/Footer/index.jsx';
 import CategoryFilter from '../../components/Blog/CategoryFilter/index.jsx';
 import PostCard from '../../components/Blog/PostCard/index.jsx';
diff --git a/layouts/PartialArticle/index.jsx b/layouts/PartialArticle/index.jsx
index c03c8709..bbd1c34d 100644
--- a/layouts/PartialArticle/index.jsx
+++ b/layouts/PartialArticle/index.jsx
@@ -1,4 +1,4 @@
-import NavBar from '../../components/NavBar.jsx';
+import NavBar from '../../components/NavBar/index.jsx';
 import Footer from '../../components/Footer/index.jsx';
 import SideBar from '../../components/SideBar.jsx';
 
diff --git a/layouts/Post/index.jsx b/layouts/Post/index.jsx
index 6ba933c1..88c013b7 100644
--- a/layouts/Post/index.jsx
+++ b/layouts/Post/index.jsx
@@ -1,7 +1,7 @@
 import Article from '@node-core/ui-components/Containers/Article';
 import BaseCrossLink from '@node-core/ui-components/Common/BaseCrossLink';
 
-import NavBar from '../../components/NavBar.jsx';
+import NavBar from '../../components/NavBar/index.jsx';
 import Footer from '../../components/Footer/index.jsx';
 import Byline from '../../components/Blog/Byline/index.jsx';
 import Cover from '../../components/Blog/Cover/index.jsx';
diff --git a/scripts/html/doc-kit.config.mjs b/scripts/html/doc-kit.config.mjs
index 9a5cc457..ced46e61 100644
--- a/scripts/html/doc-kit.config.mjs
+++ b/scripts/html/doc-kit.config.mjs
@@ -85,7 +85,7 @@ export default {
       '#theme/sponsors': join(ROOT, 'generated/sponsors.json'),
       '#theme/blog': join(ROOT, 'generated/blog.json'),
       '#theme/Layout': join(ROOT, 'components/Layout.jsx'),
-      '#theme/Navigation': join(ROOT, 'components/NavBar.jsx'),
+      '#theme/Navigation': join(ROOT, 'components/NavBar/index.jsx'),
       '#theme/Footer': join(ROOT, 'components/Footer/index.jsx'),
       '#theme/Logo': join(ROOT, 'components/Icons/Webpack.jsx'),
       '#theme/Home/Hero': join(ROOT, 'components/HomePage/Hero/index.jsx'),