fix(ui): Move NavBar to dedicated component folder and make it sticky

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>
+  );
+};

components/NavBar/index.module.css

@@ -0,0 +1,5 @@
+.navbarWrapper {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}

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';

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';
 

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';

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'),