@unisphere/nx 4.5.7 → 4.6.1

package/dist/generators/add-documentation/templates/src/css/custom.css

@@ -471,6 +471,214 @@ body {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
 }
 
+/* ============================================
+   SIDEBAR STYLING - INNGEST STYLE
+   ============================================ */
+
+/* Reset Docusaurus defaults for sidebar */
+.theme-doc-sidebar-container .menu {
+  padding: 0.5rem !important;
+}
+
+.theme-doc-sidebar-container .menu__list {
+  margin: 0 !important;
+}
+
+/* Section Headers (uppercase, gray, non-clickable) */
+.sidebar-section-header > .menu__link {
+  text-transform: uppercase !important;
+  font-size: 0.6875rem !important;
+  font-weight: 700 !important;
+  color: #9ca3af !important;
+  letter-spacing: 0.075em !important;
+  pointer-events: none !important;
+  padding: 0.375rem 0.75rem 0.375rem 0.75rem !important;
+  cursor: default !important;
+  margin-bottom: 0.5rem !important;
+  background: transparent !important;
+  border-left: none !important;
+  border-radius: 0 !important;
+}
+
+/* Add margin-top to all section headers except the first */
+.sidebar-section-header {
+  margin-top: 1.5rem !important;
+}
+
+/* First section header should have minimal top margin */
+.sidebar-section-header:first-of-type {
+  margin-top: 0.25rem !important;
+}
+
+.sidebar-section-header > .menu__link:hover {
+  background: transparent !important;
+  transform: none !important;
+  color: #9ca3af !important;
+}
+
+/* Ensure section headers never get active styles */
+.sidebar-section-header > .menu__link--active,
+.sidebar-section-header > .menu__link--active:hover {
+  background: transparent !important;
+  color: #9ca3af !important;
+  border-left: none !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+}
+
+[data-theme='dark'] .sidebar-section-header > .menu__link {
+  color: #6b7280 !important;
+}
+
+[data-theme='dark'] .sidebar-section-header > .menu__link:hover,
+[data-theme='dark'] .sidebar-section-header > .menu__link--active,
+[data-theme='dark'] .sidebar-section-header > .menu__link--active:hover {
+  color: #6b7280 !important;
+  background: transparent !important;
+  border-left: none !important;
+}
+
+/* Hide caret for section headers */
+.sidebar-section-header > .menu__link .menu__caret {
+  display: none !important;
+}
+
+/* All menu links - Inngest base styling */
+.theme-doc-sidebar-container .menu__link {
+  border-radius: 8px !important;
+  margin: 4px 0 !important;
+  padding: 0.625rem 0.75rem !important;
+  font-weight: 400 !important;
+  font-size: 0.9375rem !important;
+  line-height: 1.4 !important;
+  color: #1f2937 !important;
+  transition: all 0.15s ease !important;
+  border-left: 3px solid transparent !important;
+  background: transparent !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link {
+  color: #d1d5db !important;
+}
+
+/* Hover state */
+.theme-doc-sidebar-container .menu__link:hover:not(.sidebar-section-header > .menu__link) {
+  background: #f3f4f6 !important;
+  transform: none !important;
+  box-shadow: none !important;
+  color: #111827 !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link:hover:not(.sidebar-section-header > .menu__link) {
+  background: #1f2937 !important;
+  color: #f3f4f6 !important;
+}
+
+/* Active menu item - light blue background */
+.theme-doc-sidebar-container .menu__link--active {
+  background: #dbeafe !important;
+  border-left: 3px solid transparent !important;
+  color: #0c4a6e !important;
+  font-weight: 500 !important;
+  border-radius: 8px !important;
+  box-shadow: none !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link--active {
+  background: #1e3a8a !important;
+  border-left-color: transparent !important;
+  color: #93c5fd !important;
+}
+
+/* Active hover state */
+.theme-doc-sidebar-container .menu__link--active:hover {
+  background: #bfdbfe !important;
+  color: #0c4a6e !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link--active:hover {
+  background: #1e40af !important;
+  color: #bfdbfe !important;
+}
+
+/* Nested items */
+.theme-doc-sidebar-container .menu__list .menu__list .menu__link {
+  font-size: 0.875rem !important;
+  color: #4b5563 !important;
+  padding-left: 1.5rem !important;
+  margin: 2px 0 !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu__list .menu__list .menu__link {
+  color: #9ca3af !important;
+}
+
+/* Category caret - reduced size */
+.theme-doc-sidebar-container .menu__caret {
+  transition: transform 0.2s ease !important;
+  transform: scale(0.75) !important;
+}
+
+.theme-doc-sidebar-container .menu__list-item-collapsible--active .menu__caret {
+  transform: scale(0.75) rotate(90deg) !important;
+}
+
+/* Remove default transforms */
+.theme-doc-sidebar-container .menu__link:hover {
+  transform: none !important;
+}
+
+.theme-doc-sidebar-container .menu__list-item-collapsible:hover {
+  background: transparent !important;
+}
+
+/* ============================================
+   SIDEBAR SCROLLING FIX
+   ============================================ */
+
+/* Ensure sidebar container uses flexbox for proper height calculation */
+.theme-doc-sidebar-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Make sidebar menu scrollable within viewport */
+.theme-doc-sidebar-container .menu {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+  padding-bottom: 6rem !important;
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar styling for better aesthetics */
+.theme-doc-sidebar-container .menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
 /* Responsive Design */
 @media (max-width: 996px) {
   .navbar__item {
@@ -484,4 +692,19 @@ body {
   [data-theme='dark'] img[src*="assets/images/"] {
     padding: 0.75rem;
   }
+
+  /* Mobile sidebar scrolling fix */
+  .navbar-sidebar {
+    max-height: 100vh;
+    overflow-y: auto !important;
+  }
+
+  .navbar-sidebar .menu {
+    padding-bottom: 6rem !important;
+  }
+
+  /* Hide search in mobile header */
+  .navbar__search {
+    display: none !important;
+  }
 }

package/dist/generators/add-documentation/templates/src/pages/index.tsx.template

@@ -1,94 +1,67 @@
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
-import HomepageFeatures from '@site/src/components/homepage-features';
-import HomepageModules from '@site/src/components/homepage-modules';
-import HomepageStartNow from '@site/src/components/homepage-start-now';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
   return (
     <header className={clsx('hero relative overflow-hidden', styles.heroBanner)}>
-      {/* Modern gradient background */}
       <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-100 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900"></div>
 
-      {/* Subtle pattern overlay */}
-      <div className="absolute inset-0 opacity-30" style={{
-        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
-      }}></div>
-
       <div className="container relative z-10">
         <div className="max-w-4xl mx-auto text-center py-16 md:py-24">
-          {/* Main heading with modern typography */}
           <Heading as="h1" className={clsx('hero__title mb-6', styles.heroTitle)}>
             <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-400 dark:from-blue-400 dark:to-purple-300">
-              crafted for today
-            </span>
-            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">
-              planned for tomorrow
+              <%= documentationName__humanReadable %>
             </span>
           </Heading>
 
-          {/* Subtitle */}
-          <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
             Welcome to the <%= documentationName__humanReadable %> documentation site
           </p>
 
-          {/* Call-to-action buttons */}
-          {/* <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <a
-              href="/docs/overview/introduction"
-              className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-            >
-              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-              Get Started
-            </a>
-            <a
-              href="/docs/api"
-              className="inline-flex items-center px-8 py-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-semibold rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+            <Link
+              to="documentations/overview"
+              className="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-700 transition-all duration-200 no-underline hover:no-underline"
             >
-              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              View Documentation
-            </a>
-          </div> */}
-
-          {/* Feature highlights */}
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-            <div className="text-center group">
-              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-200">
-                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
+                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                 </svg>
               </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Lightning Fast</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-sm">Optimized performance for modern applications</p>
-            </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">Documentation</h3>
+              <p className="text-gray-600 dark:text-gray-300 text-sm">Guides, concepts, and tutorials</p>
+            </Link>
 
-            <div className="text-center group">
-              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-purple-300 to-purple-400 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-200">
-                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            <Link
+              to="reference/overview"
+              className="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-700 transition-all duration-200 no-underline hover:no-underline"
+            >
+              <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-br from-purple-400 to-purple-500 rounded-xl flex items-center justify-center">
+                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                 </svg>
               </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Modular Design</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-sm">Reusable components for scalable development</p>
-            </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">API Reference</h3>
+              <p className="text-gray-600 dark:text-gray-300 text-sm">TypeScript API documentation</p>
+            </Link>
 
-            <div className="text-center group">
-              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-200">
-                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <Link
+              to="changelog/overview"
+              className="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-700 transition-all duration-200 no-underline hover:no-underline"
+            >
+              <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
+                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                 </svg>
               </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Production Ready</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-sm">Enterprise-grade reliability and security</p>
-            </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">Changelog</h3>
+              <p className="text-gray-600 dark:text-gray-300 text-sm">Updates and release notes</p>
+            </Link>
           </div>
         </div>
       </div>
@@ -96,96 +69,11 @@ function HomepageHeader() {
   );
 }
 
-function DocumentationBanner() {
-  return (
-    <section className="relative py-16 px-4 overflow-hidden">
-      {/* Improved background with better contrast */}
-      <div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-blue-900 to-purple-900"></div>
-      {/* Dark overlay for better text contrast */}
-      <div className="absolute inset-0 bg-black/30"></div>
-      <div className="absolute inset-0 opacity-10" style={{
-        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='50' cy='10' r='1'/%3E%3Ccircle cx='10' cy='50' r='1'/%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3C/g%3E%3C/svg%3E")`
-      }}></div>
-
-      <div className="relative z-10 max-w-4xl mx-auto text-center">
-        {/* Badge */}
-        <div className="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white text-sm font-medium mb-6 border border-white/30">
-          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          Documentation
-        </div>
-
-        {/* Main content */}
-        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
-          <span className="block">Comprehensive</span>
-          <span className="block text-white/90">Documentation</span>
-        </h2>
-
-        <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
-          Everything you need to integrate, build, and deploy with <%= documentationName__humanReadable %>
-        </p>
-
-        {/* Documentation sections */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-          <a href="/docs/documentation/overview" className="bg-white/15 backdrop-blur-md rounded-xl p-6 border border-white/30 hover:bg-white/20 transition-all duration-200 group shadow-lg no-underline">
-            <div className="w-12 h-12 mx-auto mb-4 bg-white/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-200 shadow-md">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-              </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-white mb-2">Core Concepts</h3>
-            <p className="text-white/90 text-sm">Learn how <%= documentationName__humanReadable %> works under the hood</p>
-          </a>
-
-          <a href="/docs/api/overview" className="bg-white/15 backdrop-blur-md rounded-xl p-6 border border-white/30 hover:bg-white/20 transition-all duration-200 group shadow-lg no-underline">
-            <div className="w-12 h-12 mx-auto mb-4 bg-white/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-200 shadow-md">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-              </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-white mb-2">API Reference</h3>
-            <p className="text-white/90 text-sm">Complete TypeScript API documentation</p>
-          </a>
-
-          <a href="/docs/changelog/overview" className="bg-white/15 backdrop-blur-md rounded-xl p-6 border border-white/30 hover:bg-white/20 transition-all duration-200 group shadow-lg no-underline">
-            <div className="w-12 h-12 mx-auto mb-4 bg-white/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-200 shadow-md">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-              </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-white mb-2">Changelog</h3>
-            <p className="text-white/90 text-sm">Latest updates and release notes</p>
-          </a>
-        </div>
-
-        {/* Call to action */}
-        <div className="text-center">
-          <a href="/docs/documentation/overview" className="inline-flex items-center px-6 py-3 bg-white/20 backdrop-blur-md rounded-full text-white border border-white/40 shadow-lg hover:bg-white/30 transition-all duration-200 no-underline">
-            <span className="font-medium">Explore Documentation</span>
-            <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </section>
-  );
-}
-
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout title={siteConfig.title}>
       <HomepageHeader />
-      <DocumentationBanner />
-      <main className="bg-white dark:bg-gray-900">
-        {/* Add spacing and modern layout */}
-        <div className="space-y-24 py-16">
-          <HomepageFeatures />
-
-        </div>
-      </main>
     </Layout>
   );
 }

package/dist/generators/add-documentation/templates/src/theme/Navbar/Content/index.tsx

@@ -1,7 +1,9 @@
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import {
   useThemeConfig,
   ErrorCauseBoundary,
+  ThemeClassNames,
 } from '@docusaurus/theme-common';
 import {
   splitNavbarItems,
@@ -9,9 +11,10 @@ import {
 } from '@docusaurus/theme-common/internal';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarSearch from '@theme/Navbar/Search';
 import NavbarLogo from '@theme/Navbar/Logo';
-import SearchBar from '@theme/SearchBar';
 
 import styles from './styles.module.css';
 
@@ -19,98 +22,51 @@ function useNavbarItems() {
   return useThemeConfig().navbar.items as NavbarItemConfig[];
 }
 
-const navIcons: Record<string, ReactNode> = {
-  'Getting Started': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
-      <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
-      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
-      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
-    </svg>
-  ),
-  'Learn': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-      <path d="M8 7h6" />
-      <path d="M8 11h8" />
-    </svg>
-  ),
-  'Real-Time Experiences': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
-    </svg>
-  ),
-  'NPM Packages': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="m7.5 4.27 9 5.15" />
-      <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
-      <path d="m3.3 7 8.7 5 8.7-5" />
-      <path d="M12 22V12" />
-    </svg>
-  ),
-  'Create': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-      <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
-    </svg>
-  ),
-  'API': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <polyline points="16 18 22 12 16 6" />
-      <polyline points="8 6 2 12 8 18" />
-      <line x1="14" y1="4" x2="10" y2="20" />
-    </svg>
-  ),
-  'Changelog': (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M12 8v4l3 3" />
-      <circle cx="12" cy="12" r="10" />
-    </svg>
-  ),
-};
-
-function NavbarItemWithIcon({item, index}: {item: NavbarItemConfig; index: number}): ReactNode {
-  const label = (item as any).label as string | undefined;
-  const icon = label ? navIcons[label] : null;
-  const wrapperRef = React.useRef<HTMLDivElement>(null);
-
-  const handleClick = (e: React.MouseEvent) => {
-    // If the click was directly on the link, let it handle itself
-    if ((e.target as HTMLElement).closest('a')) return;
-    // Otherwise forward the click to the link inside
-    const link = wrapperRef.current?.querySelector('a');
-    if (link) link.click();
-  };
-
+function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
   return (
-    <ErrorCauseBoundary
-      key={index}
-      onError={(error) =>
-        new Error(
-          `A theme navbar item failed to render.
+    <>
+      {items.map((item, i) => (
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.
 Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
 ${JSON.stringify(item, null, 2)}`,
-          {cause: error},
-        )
-      }>
-      <div
-        ref={wrapperRef}
-        className={styles.navItemWithIcon}
-        onClick={handleClick}>
-        {icon && <span className={styles.navIcon}>{icon}</span>}
-        <NavbarItem {...item} />
-      </div>
-    </ErrorCauseBoundary>
+              {cause: error},
+            )
+          }>
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
   );
 }
 
-function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
+function NavbarContentLayout({
+  left,
+  right,
+}: {
+  left: ReactNode;
+  right: ReactNode;
+}) {
   return (
-    <>
-      {items.map((item, i) => (
-        <NavbarItemWithIcon key={i} item={item} index={i} />
-      ))}
-    </>
+    <div className="navbar__inner">
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerLeft,
+          'navbar__items',
+        )}>
+        {left}
+      </div>
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerRight,
+          'navbar__items navbar__items--right',
+        )}>
+        {right}
+      </div>
+    </div>
   );
 }
 
@@ -120,26 +76,28 @@ export default function NavbarContent(): ReactNode {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
 
+  const searchBarItem = items.find((item) => item.type === 'search');
+
   return (
-    <div className={styles.navbarWrapper}>
-      {/* Top row: logo, search, color mode toggle */}
-      <div className={styles.topRow}>
-        <div className={styles.topLeft}>
+    <NavbarContentLayout
+      left={
+        <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-        </div>
-        <div className={styles.topCenter}>
-          <SearchBar />
-        </div>
-        <div className={styles.topRight}>
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        <>
+          <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-        </div>
-      </div>
-      {/* Bottom row: navigation items */}
-      <div className={styles.bottomRow}>
-        <NavbarItems items={leftItems} />
-        <NavbarItems items={rightItems} />
-      </div>
-    </div>
+          {!searchBarItem && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
+        </>
+      }
+    />
   );
 }