jamdesk 1.0.0

package/vendored/components/navigation/Sidebar.tsx

@@ -0,0 +1,713 @@
+'use client';
+
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { usePathname, useRouter } from 'next/navigation';
+// Icons use Font Awesome CSS classes for lightweight rendering
+import type { 
+  DocsConfig, 
+  NavigationPage, 
+  NavigationConfig,
+  AnchorConfig,
+  TabConfig,
+  GroupConfig,
+} from '@/lib/docs-types';
+import {
+  normalizeNavPage,
+  normalizeLogo,
+  getIconName,
+} from '@/lib/docs-types';
+import type { TabsPosition } from '@/lib/docs-types';
+import { resolveNavigation, type ResolvedGroup, type ResolvedPage, type ResolvedAnchor, type ResolvedTab, type ResolvedExternalAnchor, type ResolvedNavItem } from '@/lib/navigation-resolver';
+import type { LayoutVariant } from '@/themes';
+import { getTheme } from '@/themes';
+import { DefaultLogo, DefaultLogoCompact } from './DefaultLogo';
+import { LanguageSelector } from './LanguageSelector';
+import { LazySearchModal as SearchModal } from '@/components/search/LazySearchModal';
+import { ThemeToggle, ThemeToggleCycle } from '@/components/theme/ThemeToggle';
+import { getIconClass } from '@/lib/icon-utils';
+import { getTabsFromConfig } from '@/lib/navigation-utils';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+
+interface SidebarProps {
+  config: DocsConfig;
+  layout?: LayoutVariant;
+  tabsPosition?: TabsPosition;
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+// HTTP method badge colors
+const methodColors: Record<string, { bg: string; text: string }> = {
+  GET: { bg: 'bg-emerald-500/15', text: 'text-emerald-600 dark:text-emerald-400' },
+  POST: { bg: 'bg-blue-500/15', text: 'text-blue-600 dark:text-blue-400' },
+  PUT: { bg: 'bg-amber-500/15', text: 'text-amber-600 dark:text-amber-400' },
+  PATCH: { bg: 'bg-orange-500/15', text: 'text-orange-600 dark:text-orange-400' },
+  DELETE: { bg: 'bg-red-500/15', text: 'text-red-600 dark:text-red-400' },
+};
+
+// Memoized navigation page component to prevent re-renders when only other pages change
+interface NavPageProps {
+  page: ResolvedPage;
+  pathname: string | null;
+  layout: LayoutVariant;
+  onPrefetch: (path: string) => void;
+  linkPrefix?: string; // e.g., '/docs' when hostAtDocs is true
+}
+
+export const NavPage = React.memo(function NavPage({ page, pathname, layout, onPrefetch, linkPrefix = '' }: NavPageProps) {
+  const href = `${linkPrefix}/${page.path}`;
+  const isActive = pathname === href;
+  const colors = page.method ? methodColors[page.method] : null;
+
+  return (
+    <li>
+      <Link
+        href={href}
+        prefetch={false}
+        onMouseEnter={() => onPrefetch(page.path)}
+        className={`flex items-center gap-2 ${layout === 'header-logo' ? 'pr-3' : 'px-3'} py-1.5 rounded-lg text-sm transition-colors ${
+          isActive
+            ? 'text-[var(--color-primary)] nav-active'
+            : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
+        }`}
+      >
+        {page.method && colors && (
+          <span className={`w-12 text-center px-1.5 py-0.5 text-[10px] font-bold rounded flex-shrink-0 ${colors.bg} ${colors.text}`}>
+            {page.method === 'DELETE' ? 'DEL' : page.method}
+          </span>
+        )}
+        {page.icon && !page.method && (
+          <i className={`${getIconClass(page.icon)} text-[14px] flex-shrink-0 opacity-60`} aria-hidden="true" />
+        )}
+        <span className="flex-1 min-w-0">{page.title}</span>
+        {page.tag && (
+          <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded bg-[var(--color-accent)]/15 text-[var(--color-accent)]">
+            {page.tag}
+          </span>
+        )}
+      </Link>
+    </li>
+  );
+});
+
+/** Find all groups in the path from root to the page containing currentPath */
+function findGroupsContainingPath(groups: ResolvedGroup[], currentPath: string, parentNames: string[] = []): Set<string> {
+  const result = new Set<string>();
+  for (const group of groups) {
+    const groupPath = group.name ? [...parentNames, group.name] : parentNames;
+
+    if (group.pages.some(page => page.path === currentPath)) {
+      groupPath.forEach(name => result.add(name));
+    }
+
+    if (group.nested) {
+      const nestedResults = findGroupsContainingPath(group.nested, currentPath, groupPath);
+      nestedResults.forEach(name => result.add(name));
+    }
+  }
+  return result;
+}
+
+export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPositionProp, isOpen = false, onClose }: SidebarProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [logoError, setLogoError] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const sidebarRef = useRef<HTMLElement>(null);
+  const linkPrefix = useLinkPrefix();
+
+  // Stable callback for prefetching pages on hover
+  const handlePrefetch = useCallback((path: string) => {
+    router.prefetch(`${linkPrefix}/${path}`);
+  }, [router, linkPrefix]);
+
+  // Determine effective tabsPosition:
+  // 1. Use config.tabsPosition if specified
+  // 2. Otherwise use prop if specified
+  // 3. Otherwise use theme default
+  const themeConfig = getTheme(config.theme);
+  const effectiveTabsPosition: TabsPosition = config.tabsPosition || tabsPositionProp || themeConfig.defaultTabsPosition;
+  const showTabsInSidebar = effectiveTabsPosition === 'left';
+
+  // In sidebar-logo layout, logo and search are in sidebar
+  const showLogoInSidebar = layout === 'sidebar-logo';
+  const showSearchInSidebar = layout === 'sidebar-logo';
+  
+  // Logo configuration
+  const logoConfig = normalizeLogo(config.logo);
+  const logoHref = logoConfig?.href || '/';
+  const logoSrc = logoConfig ? (isDark && logoConfig.dark ? logoConfig.dark : logoConfig.light) : null;
+  const showLogoImage = logoSrc && !logoError;
+
+  // Resolve navigation using the new resolver
+  const resolvedNav = useMemo(() => {
+    return resolveNavigation(config, pathname || '/docs');
+  }, [config, pathname]);
+
+  // Track if this is the initial mount (for resetting expanded state on refresh)
+  const isInitialMount = useRef(true);
+
+  // Memoize the groups that should be expanded for the current page
+  const groupsForCurrentPage = useMemo(() => {
+    const currentPath = pathname?.replace(/^\/(?:docs\/)?/, '') || '';
+    return findGroupsContainingPath(resolvedNav.groups, currentPath);
+  }, [resolvedNav.groups, pathname]);
+
+  // Expand groups containing current page
+  // On initial mount: reset to only current page's groups
+  // On navigation: add current page's groups to existing expanded set (preserve manually opened)
+  useEffect(() => {
+    if (isInitialMount.current) {
+      // Initial mount (page load/refresh): only expand current page's groups
+      isInitialMount.current = false;
+      setExpandedGroups(groupsForCurrentPage);
+    } else {
+      // Navigation: add current page's groups to existing expanded set
+      setExpandedGroups(prev => {
+        const newSet = new Set(prev);
+        groupsForCurrentPage.forEach(g => newSet.add(g));
+        return newSet;
+      });
+    }
+  }, [groupsForCurrentPage]);
+
+  // Detect dark mode for logo switching
+  useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDark(document.documentElement.classList.contains('dark'));
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // Keyboard shortcut for search (Cmd+K / Ctrl+K) - only in sidebar-logo layout
+  useEffect(() => {
+    if (!showSearchInSidebar) return;
+    
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setIsSearchOpen((open) => !open);
+      }
+    };
+
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, [showSearchInSidebar]);
+
+  // Close sidebar on route change (mobile)
+  useEffect(() => {
+    onClose?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]); // Intentionally excluding onClose - we only want to trigger on pathname changes
+
+  // Scroll the active navigation link into view when pathname changes
+  useEffect(() => {
+    // Double RAF ensures DOM is painted before measuring
+    let rafId = requestAnimationFrame(() => {
+      rafId = requestAnimationFrame(() => {
+        const scrollContainer = sidebarRef.current?.querySelector('.sidebar-scroll');
+        const activeLink = scrollContainer?.querySelector('.nav-active');
+        if (!scrollContainer || !activeLink) return;
+
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const linkRect = activeLink.getBoundingClientRect();
+        const isVisible = linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom;
+
+        if (!isVisible) {
+          activeLink.scrollIntoView({ block: 'center', behavior: 'instant' });
+        }
+      });
+    });
+
+    return () => cancelAnimationFrame(rafId);
+  }, [pathname]);
+
+  // Prevent body scroll when sidebar is open on mobile
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  // Find the first page in a group (including nested groups)
+  function findFirstPageInGroup(g: ResolvedGroup): string | null {
+    if (g.pages.length > 0) return g.pages[0].path;
+    for (const nested of g.nested || []) {
+      const nestedFirst = findFirstPageInGroup(nested);
+      if (nestedFirst) return nestedFirst;
+    }
+    return null;
+  }
+
+  // Toggle group expansion; if expanding, navigate to first page
+  const handleGroupClick = useCallback((group: ResolvedGroup) => {
+    setExpandedGroups(prev => {
+      const newSet = new Set(prev);
+      if (prev.has(group.name)) {
+        newSet.delete(group.name);
+      } else {
+        const firstPagePath = findFirstPageInGroup(group);
+        if (firstPagePath) router.push(`${linkPrefix}/${firstPagePath}`);
+        newSet.add(group.name);
+      }
+      return newSet;
+    });
+  }, [router, linkPrefix]);
+
+  // Render a navigation group (supports nesting)
+  function renderGroup(group: ResolvedGroup, level: number = 0) {
+    const isExpanded = expandedGroups.has(group.name);
+
+    // Skip rendering if group has no name and no content
+    if (!group.name && group.pages.length === 0 && !group.nested?.length && !group.items?.length) {
+      return null;
+    }
+
+    return (
+      <div key={group.name || `group-${level}`} className={level === 0 ? 'ml-6' : level === 1 ? '' : 'ml-3'}>
+        {group.name && (
+          level === 0 ? (
+            <button
+              onClick={() => handleGroupClick(group)}
+              className="flex items-center justify-between w-full text-left mb-2 cursor-pointer"
+            >
+              <span className="text-sm font-semibold text-[var(--color-text-tertiary)] flex items-center gap-2">
+                {group.icon && (
+                  <i className={`${getIconClass(group.icon)} text-[14px]`} aria-hidden="true" />
+                )}
+                {group.name}
+                {group.tag && (
+                  <span className="px-1.5 py-0.5 text-[9px] font-semibold rounded bg-[var(--color-accent)]/15 text-[var(--color-accent)] normal-case tracking-normal">
+                    {group.tag}
+                  </span>
+                )}
+              </span>
+            </button>
+          ) : (
+            <button
+              onClick={() => handleGroupClick(group)}
+              className={`nav-group-l1 flex items-center gap-1.5 ${layout === 'header-logo' ? 'pr-3' : 'px-3'} py-1.5 rounded-lg text-sm transition-colors w-full text-left text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]`}
+            >
+              <span className="truncate">{group.name}</span>
+              <i
+                className={`fa-solid fa-chevron-right text-[8px] text-[var(--color-text-muted)] transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                aria-hidden="true"
+              />
+              {group.tag && (
+                <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded bg-[var(--color-accent)]/15 text-[var(--color-accent)]">
+                  {group.tag}
+                </span>
+              )}
+            </button>
+          )
+        )}
+
+        {(level === 0 || isExpanded || !group.name) && (
+          <>
+            {group.items ? (
+              // Use ordered items array when available (preserves page/group ordering)
+              <div className={level === 1 ? 'ml-3' : ''}>
+                {(() => {
+                  // Group consecutive pages into single ul elements for continuous border
+                  const elements: React.ReactNode[] = [];
+                  let currentPages: typeof group.items = [];
+
+                  const flushPages = () => {
+                    if (currentPages.length > 0) {
+                      elements.push(
+                        <ul key={`pages-${elements.length}`}>
+                          {currentPages.map((p) => p.type === 'page' && (
+                            <NavPage
+                              key={p.page.path}
+                              page={p.page}
+                              pathname={pathname}
+                              layout={layout}
+                              onPrefetch={handlePrefetch}
+                              linkPrefix={linkPrefix}
+                            />
+                          ))}
+                        </ul>
+                      );
+                      currentPages = [];
+                    }
+                  };
+
+                  group.items.forEach((item, idx) => {
+                    if (item.type === 'page') {
+                      currentPages.push(item);
+                    } else {
+                      flushPages();
+                      elements.push(
+                        <div key={item.group.name || `nested-${idx}`} className={level === 0 ? '' : level === 1 ? '' : 'mt-4'}>
+                          {renderGroup(item.group, level + 1)}
+                        </div>
+                      );
+                    }
+                  });
+                  flushPages();
+
+                  return elements;
+                })()}
+              </div>
+            ) : (
+              // Fallback to legacy pages + nested (for backwards compatibility)
+              <>
+                {group.pages.length > 0 && (
+                  <ul className={level === 1 ? 'ml-3' : ''}>
+                    {group.pages.map((page) => (
+                      <NavPage
+                        key={page.path}
+                        page={page}
+                        pathname={pathname}
+                        layout={layout}
+                        onPrefetch={handlePrefetch}
+                        linkPrefix={linkPrefix}
+                      />
+                    ))}
+                  </ul>
+                )}
+                {group.nested && group.nested.length > 0 && (
+                  <div className={level === 0 ? '' : level === 1 ? 'ml-3' : 'mt-4'}>
+                    {group.nested.map((nested) => renderGroup(nested, level + 1))}
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Render anchors (deprecated - for backwards compatibility)
+  function renderAnchors() {
+    if (resolvedNav.anchors.length === 0) return null;
+
+    return (
+      <div className="flex flex-col gap-1 mb-6">
+        {resolvedNav.anchors.map((anchor) => {
+          const isCurrentAnchor = anchor.name === resolvedNav.activeAnchor;
+
+          if (anchor.isExternal && anchor.href) {
+            return (
+              <a
+                key={anchor.name}
+                href={anchor.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-nav-anchor
+                className="flex items-center gap-2.5 ml-6 pr-3 py-1.5 text-sm font-medium transition-colors text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
+              >
+                <i className={`${getIconClass(anchor.icon)} text-[14px]`} aria-hidden="true" />
+                <span className="flex-1">{anchor.name}</span>
+                <i className="fa-solid fa-arrow-up-right-from-square text-[14px] opacity-50" aria-hidden="true" />
+              </a>
+            );
+          }
+
+          // Find the first page in this anchor's groups
+          const findFirstPage = (groups: ResolvedGroup[]): string | null => {
+            for (const group of groups) {
+              if (group.pages.length > 0) {
+                return group.pages[0].path;
+              }
+              if (group.nested) {
+                const nestedFirst = findFirstPage(group.nested);
+                if (nestedFirst) return nestedFirst;
+              }
+            }
+            return null;
+          };
+          const firstPagePath = findFirstPage(anchor.groups);
+
+          return (
+            <button
+              key={anchor.name}
+              data-nav-anchor
+              data-active={isCurrentAnchor ? 'true' : 'false'}
+              onClick={() => {
+                if (firstPagePath) {
+                  router.push(`${linkPrefix}/${firstPagePath}`);
+                }
+              }}
+              className={`flex items-center gap-2.5 ml-6 pr-3 py-1.5 text-sm font-medium transition-colors cursor-pointer ${
+                isCurrentAnchor
+                  ? 'text-[var(--color-primary)]'
+                  : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
+              }`}
+            >
+              <i className={`${getIconClass(anchor.icon)} text-[14px] ${isCurrentAnchor ? 'text-[var(--color-primary)]' : ''}`} aria-hidden="true" />
+              {anchor.name}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Render external anchors (top-level config.anchors)
+  function renderExternalAnchors() {
+    if (resolvedNav.externalAnchors.length === 0) return null;
+
+    return (
+      <div className="flex flex-col gap-1 px-4 pt-4">
+        {resolvedNav.externalAnchors.map((anchor) => (
+          <a
+            key={anchor.name}
+            href={anchor.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2.5 px-2 py-1.5 text-sm font-medium transition-colors text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg"
+          >
+            {anchor.icon && (
+              <i className={`${getIconClass(anchor.icon)} text-[14px]`} aria-hidden="true" />
+            )}
+            <span className="flex-1">{anchor.name}</span>
+            <i className="fa-solid fa-arrow-up-right-from-square text-[10px] opacity-50" aria-hidden="true" />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  // Find first page in a tab's groups
+  function findFirstPageInTab(tab: ResolvedTab): string | null {
+    // Find the corresponding tab config to get its groups (language-aware)
+    const tabs = getTabsFromConfig(config, pathname || undefined);
+    const tabConfig = tabs.find(t => t.tab === tab.name);
+    if (!tabConfig) return null;
+
+    // Check groups in tab
+    if (tabConfig.groups) {
+      for (const group of tabConfig.groups) {
+        if (group.pages && group.pages.length > 0) {
+          const firstPage = group.pages[0];
+          if (typeof firstPage === 'string') return firstPage;
+          if ('page' in firstPage) return firstPage.page;
+        }
+      }
+    }
+
+    // Check direct pages in tab
+    if (tabConfig.pages && tabConfig.pages.length > 0) {
+      const firstPage = tabConfig.pages[0];
+      if (typeof firstPage === 'string') return firstPage;
+      if ('page' in firstPage) return (firstPage as { page: string }).page;
+    }
+
+    return null;
+  }
+
+  // Render sidebar tabs (always on mobile, desktop only when tabsPosition === 'left')
+  function renderSidebarTabs() {
+    if (resolvedNav.tabs.length <= 1) return null;
+
+    // On mobile: always show tabs in sidebar
+    // On desktop: only show if tabsPosition is 'left' (showTabsInSidebar)
+    const visibilityClass = showTabsInSidebar ? '' : 'lg:hidden';
+
+    return (
+      <div className={`sidebar-tabs flex flex-col gap-2 px-4 pt-2 pb-6 ${visibilityClass}`}>
+        {resolvedNav.tabs.map((tab) => {
+          const isActive = tab.name === resolvedNav.activeTab;
+
+          // External tab link
+          if (tab.isExternal && tab.href) {
+            return (
+              <a
+                key={tab.name}
+                href={tab.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="nav-tab-link flex items-center gap-2 px-3 py-1.5 text-sm font-medium transition-colors text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
+              >
+                {tab.icon && (
+                  <i className={`${getIconClass(tab.icon)} text-[14px]`} aria-hidden="true" />
+                )}
+                <span className="flex-1">{tab.name}</span>
+                <i className="fa-solid fa-arrow-up-right-from-square text-[10px] opacity-50" aria-hidden="true" />
+              </a>
+            );
+          }
+
+          // Internal tab - navigate to first page
+          const firstPagePath = findFirstPageInTab(tab);
+
+          return (
+            <button
+              key={tab.name}
+              onClick={() => {
+                if (firstPagePath) {
+                  router.push(`${linkPrefix}/${firstPagePath}`);
+                }
+              }}
+              className={`nav-tab-link flex items-center gap-2 px-3 py-1.5 text-sm transition-colors cursor-pointer ${
+                isActive
+                  ? 'text-[var(--color-primary)] font-semibold bg-[var(--color-bg-tertiary)]'
+                  : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]'
+              }`}
+            >
+              {tab.icon && (
+                <i className={`${getIconClass(tab.icon)} text-[14px]`} aria-hidden="true" />
+              )}
+              <span>{tab.name}</span>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  const showTopDivider = resolvedNav.externalAnchors.length > 0;
+  const hasTopTabsBar = getTabsFromConfig(config, pathname || undefined).length > 1 && !showTabsInSidebar;
+  const desktopSidebarClasses = layout === 'sidebar-logo'
+    ? 'lg:fixed lg:top-0 lg:left-0 lg:bottom-0 lg:z-40'
+    : 'lg:sticky lg:self-start lg:z-30 lg:flex-shrink-0';
+
+  return (
+    <>
+      {/* Mobile overlay - z-50 to cover header (z-40) */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-50 bg-black/50 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        ref={sidebarRef}
+        className={`
+          w-[283px] lg:w-[295px] flex flex-col
+          ${layout === 'sidebar-logo' ? 'bg-[var(--color-bg-sidebar,var(--color-bg-primary))]' : 'bg-[var(--color-bg-primary)]'}
+          border-r border-[var(--color-border)]
+          transition-transform duration-300 ease-in-out
+          fixed top-0 left-0 bottom-0 z-[60]
+          ${desktopSidebarClasses}
+          ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        `}
+      >
+        {/* Mobile header with logo, theme toggle, and close button - fixed at top */}
+        <div className="flex-shrink-0 flex items-center justify-between p-4 border-b border-[var(--color-border)] lg:hidden bg-[var(--color-bg-primary)]">
+          <div className="flex items-center gap-1">
+            <Link href={logoHref} prefetch={false} className="flex items-center">
+              {showLogoImage ? (
+                <div className="flex items-center gap-2">
+                  <Image
+                    src={logoSrc}
+                    alt={`${config.name} logo`}
+                    width={100}
+                    height={28}
+                    className="h-7 w-auto max-h-7 max-w-[170px] object-contain"
+                    onError={() => setLogoError(true)}
+                  />
+                </div>
+              ) : (
+                <DefaultLogoCompact name={config.name} />
+              )}
+            </Link>
+            <ThemeToggleCycle />
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors"
+            aria-label="Close sidebar"
+          >
+            <i className="fa-solid fa-xmark text-[18px]" aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* Scrollable content area - everything below mobile header scrolls */}
+        <div className="flex-1 overflow-y-auto sidebar-scroll" data-has-tabs={hasTopTabsBar ? 'true' : 'false'}>
+
+        {/* Logo in sidebar - for sidebar-logo layout on desktop */}
+        {showLogoInSidebar && (
+          <div className="hidden lg:flex items-center justify-between p-4">
+            <Link href={logoHref} prefetch={false} className="flex items-center">
+              {showLogoImage ? (
+                <div className="flex items-center gap-2">
+                  <Image
+                    src={logoSrc}
+                    alt={`${config.name} logo`}
+                    width={120}
+                    height={32}
+                    className="h-8 w-auto max-h-8 max-w-[170px] object-contain"
+                    onError={() => setLogoError(true)}
+                  />
+                </div>
+              ) : (
+                <DefaultLogo name={config.name} showBadge={false} />
+              )}
+            </Link>
+            <ThemeToggle />
+          </div>
+        )}
+
+        {/* Search button in sidebar - for sidebar-logo layout (desktop only, mobile uses header search) */}
+        {showSearchInSidebar && (
+          <div className="hidden lg:block px-4 pt-4 pb-4">
+            <button
+              onClick={() => setIsSearchOpen(true)}
+              className="w-full flex items-center gap-2.5 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors"
+            >
+              <i className="fa-solid fa-magnifying-glass text-[14px] flex-shrink-0" aria-hidden="true" />
+              <span className="flex-1 text-left">Search...</span>
+              <kbd className="hidden sm:inline-flex px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded items-center gap-[2px]">
+                <span className="text-xs leading-none">⌘</span>
+                <span>K</span>
+              </kbd>
+            </button>
+          </div>
+        )}
+
+        <nav className="flex-1">
+          {/* External anchors - appear at top of sidebar on all pages */}
+          {renderExternalAnchors()}
+
+          {/* Sidebar tabs - when tabsPosition === 'left' */}
+          {renderSidebarTabs()}
+
+          {/* Divider between top section and navigation groups */}
+          {showTopDivider && (
+            <div className="mx-4 my-4 border-t border-[var(--color-border)]" />
+          )}
+
+          {/* Legacy anchors (deprecated - for backwards compatibility) */}
+          {renderAnchors()}
+
+          {/* Navigation Groups */}
+          <div className="sidebar-nav-groups">
+            {resolvedNav.groups.map((group) => renderGroup(group))}
+          </div>
+        </nav>
+
+        {/* Language Selector - for sidebar-logo layout */}
+        {layout === 'sidebar-logo' && resolvedNav.languages.length > 1 && (
+          <div className="px-4 py-3 border-t border-[var(--color-border)]">
+            <LanguageSelector
+              languages={resolvedNav.languages}
+              position="up"
+              defaultLanguage={resolvedNav.languages.find((l) => l.isDefault)?.code}
+            />
+          </div>
+        )}
+        </div>{/* End scrollable content area */}
+      </aside>
+
+      {/* Search Modal - shown when search is opened from sidebar */}
+      <SearchModal isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
+    </>
+  );
+}