feat(navbar): redesigned navbar using TailwindCSS

src/theme/Navbar/Content/index.js

@@ -0,0 +1,109 @@
+/**
+ * Enhanced Navbar Content Component - Fixed for Docusaurus
+ * Keeps original structure while adding modern enhancements
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {
+  useThemeConfig,
+  ErrorCauseBoundary,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+
+function useNavbarItems() {
+  return useThemeConfig().navbar.items;
+}
+
+function NavbarItems({ items }) {
+  return (
+    <>
+      {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 className="navbar__item text-white transition-all duration-200 hover:transform hover:-translate-y-0.5 hover:text-indigo-400">
+            <NavbarItem {...item} />
+          </div>
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+function NavbarContentLayout({ left, right }) {
+  return (
+    <div className="navbar__inner">
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerLeft,
+          'navbar__items flex items-center space-x-2 text-white'
+        )}>
+        {left}
+      </div>
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerRight,
+          'navbar__items navbar__items--right flex items-center space-x-2 text-white'
+        )}>
+        {right}
+      </div>
+    </div>
+  );
+}
+
+export default function NavbarContent() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const searchBarItem = items.find((item) => item.type === 'search');
+
+  return (
+    <NavbarContentLayout
+      left={
+        <>
+          {!mobileSidebar.disabled && (
+            <div className="navbar__toggle transition-all duration-200 hover:scale-105 text-white">
+              <NavbarMobileSidebarToggle />
+            </div>
+          )}
+          <div className="navbar__brand transition-all duration-200 hover:scale-105 text-white">
+            <NavbarLogo />
+          </div>
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        <>
+          <NavbarItems items={rightItems} />
+          <div className="navbar__toggle transition-all duration-200 hover:scale-105 text-white">
+            <NavbarColorModeToggle />
+          </div>
+          {!searchBarItem && (
+            <div className="navbar__search transition-all duration-200 hover:scale-105 text-white">
+              <NavbarSearch>
+                <SearchBar />
+              </NavbarSearch>
+            </div>
+          )}
+        </>
+      }
+    />
+  );
+}

src/theme/Navbar/Layout/index.js

@@ -0,0 +1,91 @@
+/**
+ * Enhanced Navbar Layout Component - Fixed for Docusaurus
+ * Color scheme: dark only
+ */
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames, useThemeConfig } from '@docusaurus/theme-common';
+import {
+  useHideableNavbar,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
+
+function NavbarBackdrop(props) {
+  return (
+    <div
+      role="presentation"
+      {...props}
+      className={clsx(
+        'navbar-sidebar__backdrop',
+        'fixed inset-0 z-40 bg-black/30 backdrop-blur-sm transition-opacity duration-300',
+        props.className
+      )}
+    />
+  );
+}
+
+export default function NavbarLayout({ children }) {
+  const {
+    navbar: { hideOnScroll, style },
+  } = useThemeConfig();
+  const mobileSidebar = useNavbarMobileSidebar();
+  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape' && mobileSidebar.shown) {
+        mobileSidebar.toggle();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [mobileSidebar.shown, mobileSidebar.toggle]);
+
+  return (
+    <nav
+      ref={navbarRef}
+      aria-label={translate({
+        id: 'theme.NavBar.navAriaLabel',
+        message: 'Main',
+        description: 'The ARIA label for the main navigation',
+      })}
+      className={clsx(
+        ThemeClassNames.layout.navbar.container,
+        'navbar',
+        'navbar--fixed-top',
+        'transition-all duration-300 ease-out',
+        'backdrop-blur-md bg-gray-900/95',
+        'border-b',
+        isScrolled
+          ? 'shadow-lg border-gray-700/60'
+          : 'border-transparent',
+        hideOnScroll && [
+          'transform transition-transform duration-300',
+          !isNavbarVisible && '-translate-y-full',
+        ],
+        {
+          'navbar--dark': style === 'dark',
+          'navbar--primary': style === 'primary',
+          'navbar-sidebar--show': mobileSidebar.shown,
+        },
+      )}
+    >
+      {children}
+      <NavbarBackdrop onClick={mobileSidebar.toggle} />
+      <NavbarMobileSidebar />
+    </nav>
+  );
+}

src/theme/Navbar/NavbarStyles.js

@@ -0,0 +1,187 @@
+// NavbarStyles.js - Custom styles component for enhanced navbar
+import { useEffect } from 'react';
+
+export default function NavbarStyles() {
+  useEffect(() => {
+    // Inject custom CSS for navbar enhancements
+    const styleId = 'enhanced-navbar-styles';
+
+    // Check if styles already exist
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      /* Enhanced Navbar Custom Styles - Docusaurus Compatible */
+
+      /* Smooth scroll behavior */
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Enhanced navbar backdrop blur support */
+      @supports (backdrop-filter: blur(10px)) {
+        .navbar {
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+        }
+      }
+
+      /* Active link highlighting with animation */
+      .navbar__link--active {
+        position: relative;
+        font-weight: 600;
+        color: var(--ifm-color-primary) !important;
+      }
+
+      .navbar__link--active::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 2px;
+        background: linear-gradient(90deg, var(--ifm-color-primary), var(--ifm-color-primary-light));
+        border-radius: 1px;
+        animation: slideInActive 0.3s ease-out;
+      }
+
+      @keyframes slideInActive {
+        from { 
+          transform: translateX(-50%) scaleX(0);
+          opacity: 0;
+        }
+        to { 
+          transform: translateX(-50%) scaleX(1);
+          opacity: 1;
+        }
+      }
+
+      /* Enhanced navbar item hover effects */
+      .navbar__item {
+        transition: transform 0.2s ease-out;
+      }
+
+      .navbar__item:hover {
+        transform: translateY(-1px);
+      }
+
+      .navbar__link {
+        transition: all 0.2s ease-out;
+        border-radius: 6px;
+        padding: 0.5rem 0.75rem;
+      }
+
+      .navbar__link:hover {
+        background-color: var(--ifm-color-emphasis-200);
+        transform: translateY(-1px);
+      }
+
+      /* Logo hover animation */
+      .navbar__logo {
+        transition: transform 0.2s ease-out;
+      }
+
+      .navbar__logo:hover {
+        transform: scale(1.05);
+      }
+
+      /* Enhanced mobile sidebar */
+      .navbar-sidebar {
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .navbar-sidebar__item {
+        transition: all 0.2s ease-out;
+      }
+
+      .navbar-sidebar__item:hover {
+        transform: translateX(4px);
+        background-color: var(--ifm-color-emphasis-100);
+      }
+
+      /* Enhanced focus styles for accessibility */
+      .navbar__item:focus-visible,
+      .navbar__link:focus-visible,
+      .navbar__toggle:focus-visible {
+        outline: 2px solid var(--ifm-color-primary);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      /* Search bar enhancements */
+      .navbar__search-input {
+        transition: all 0.2s ease-out;
+        border-radius: 8px;
+      }
+
+      .navbar__search-input:focus {
+        transform: scale(1.02);
+        box-shadow: 0 0 0 2px var(--ifm-color-primary);
+      }
+
+      /* Color mode toggle enhancements */
+      .navbar__toggle {
+        transition: all 0.2s ease-out;
+        border-radius: 6px;
+        padding: 0.5rem;
+      }
+
+      .navbar__toggle:hover {
+        background-color: var(--ifm-color-emphasis-200);
+        transform: scale(1.05);
+      }
+
+      /* Mobile sidebar backdrop */
+      .navbar-sidebar__backdrop {
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+      }
+
+      /* Custom scrollbar for mobile sidebar */
+      .navbar-sidebar__items {
+        scrollbar-width: thin;
+        scrollbar-color: var(--ifm-color-primary) transparent;
+      }
+
+      .navbar-sidebar__items::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .navbar-sidebar__items::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .navbar-sidebar__items::-webkit-scrollbar-thumb {
+        background-color: var(--ifm-color-primary);
+        border-radius: 3px;
+      }
+
+      /* Responsive improvements */
+      @media (max-width: 996px) {
+        .navbar__items {
+          gap: 0.5rem;
+        }
+
+        .navbar__link {
+          padding: 0.75rem 1rem;
+        }
+      }
+    `;
+
+    document.head.appendChild(style);
+
+    // Cleanup function
+    return () => {
+      const existingStyle = document.getElementById(styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+    };
+  }, []);
+
+  return null; // This component doesn't render anything
+}