@hutusi/amytis 1.6.0 → 1.8.0

package/src/components/LanguageSwitch.tsx

@@ -1,17 +1,128 @@
 'use client';
 
 import { useLanguage } from './LanguageProvider';
+import { Language } from '@/i18n/translations';
+import { siteConfig } from '../../site.config';
 
-export default function LanguageSwitch() {
-  const { language, setLanguage } = useLanguage();
+const LOCALE_LABELS: Record<string, string> = {
+  en: 'EN',
+  zh: '中文',
+};
 
+// Short labels for the compact navbar pill
+const LOCALE_LABELS_SHORT: Record<string, string> = {
+  en: 'EN',
+  zh: '中',
+};
+
+interface LanguageSwitchProps {
+  /** pill — compact segmented pill for the navbar (default)
+   *  text — lightweight typographic links for the footer */
+  variant?: 'pill' | 'text';
+}
+
+export default function LanguageSwitch({ variant = 'pill' }: LanguageSwitchProps) {
+  const { language, setLanguage, isHydrated } = useLanguage();
+  const locales = siteConfig.i18n.locales;
+
+  if (locales.length < 2) return null;
+
+  // SSR placeholder — reserve space to avoid layout shift
+  if (!isHydrated) {
+    return <div className={variant === 'pill' ? 'w-[52px] h-8' : 'w-16 h-4'} aria-hidden="true" />;
+  }
+
+  const currentIndex = locales.indexOf(language);
+  const nextLocale = locales[(currentIndex + 1) % locales.length] as Language;
+
+  // ── Text variant: quiet typographic links for the footer ──────────────────
+  if (variant === 'text') {
+    if (locales.length === 2) {
+      const [a, b] = locales as Language[];
+      return (
+        <span className="flex items-center gap-1.5" role="group" aria-label="Language">
+          <button
+            type="button"
+            onClick={() => setLanguage(a)}
+            aria-pressed={language === a}
+            className={`text-xs font-sans tracking-wide transition-colors duration-150 ${
+              language === a
+                ? 'text-foreground/80 font-medium cursor-default'
+                : 'text-muted/50 hover:text-foreground/70 cursor-pointer'
+            }`}
+          >
+            {LOCALE_LABELS[a] ?? a.toUpperCase()}
+          </button>
+          <span className="text-muted/25 select-none" aria-hidden="true">·</span>
+          <button
+            type="button"
+            onClick={() => setLanguage(b)}
+            aria-pressed={language === b}
+            className={`text-xs font-sans tracking-wide transition-colors duration-150 ${
+              language === b
+                ? 'text-foreground/80 font-medium cursor-default'
+                : 'text-muted/50 hover:text-foreground/70 cursor-pointer'
+            }`}
+          >
+            {LOCALE_LABELS[b] ?? b.toUpperCase()}
+          </button>
+        </span>
+      );
+    }
+    // 3+ locales text fallback: cycle on click
+    return (
+      <button
+        type="button"
+        onClick={() => setLanguage(nextLocale)}
+        className="text-xs font-sans text-muted/60 hover:text-foreground/80 transition-colors duration-150"
+        aria-label={`Switch to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+      >
+        {LOCALE_LABELS[language] ?? language.toUpperCase()}
+      </button>
+    );
+  }
+
+  // ── Pill variant: compact segmented pill for the navbar ───────────────────
+  if (locales.length === 2) {
+    const [a, b] = locales as Language[];
+    return (
+      <button
+        onClick={() => setLanguage(nextLocale)}
+        className="group flex items-center rounded-full border border-muted/20 bg-transparent hover:border-accent/40 transition-all duration-200"
+        aria-label={`Switch language to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+        title={`Switch to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+      >
+        <span
+          className={`px-2 py-1 rounded-full text-[11px] font-sans font-bold tracking-wider transition-all duration-200 ${
+            language === a
+              ? 'text-accent bg-accent/10'
+              : 'text-muted/50 group-hover:text-foreground/60'
+          }`}
+        >
+          {LOCALE_LABELS_SHORT[a] ?? a.toUpperCase()}
+        </span>
+        <span className="text-muted/25 text-[10px] select-none -mx-0.5" aria-hidden="true">·</span>
+        <span
+          className={`px-2 py-1 rounded-full text-[11px] font-sans font-bold tracking-wider transition-all duration-200 ${
+            language === b
+              ? 'text-accent bg-accent/10'
+              : 'text-muted/50 group-hover:text-foreground/60'
+          }`}
+        >
+          {LOCALE_LABELS_SHORT[b] ?? b.toUpperCase()}
+        </span>
+      </button>
+    );
+  }
+
+  // 3+ locales pill fallback: show current, click cycles
   return (
     <button
-      onClick={() => setLanguage(language === 'en' ? 'zh' : 'en')}
-      className="p-2 rounded-md hover:bg-muted/20 transition-colors text-xs"
-      aria-label="Toggle Language"
+      onClick={() => setLanguage(nextLocale)}
+      className="w-8 h-8 flex items-center justify-center text-foreground/80 hover:text-accent transition-colors duration-200 text-[11px] font-sans font-bold tracking-wider"
+      aria-label={`Language: ${LOCALE_LABELS_SHORT[language] ?? language}. Click to switch to ${LOCALE_LABELS_SHORT[nextLocale] ?? nextLocale}`}
     >
-      {language === 'en' ? '中文' : 'EN'}
+      {LOCALE_LABELS_SHORT[language] ?? language.toUpperCase()}
     </button>
   );
 }

package/src/components/LocaleSwitch.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useLanguage } from './LanguageProvider';
+import { useEffect, useRef, ReactNode } from 'react';
+
+/**
+ * Shows the [data-locale] child matching the active language, hiding all others.
+ * Keeps MarkdownRenderer fully server-rendered — no fs/Node modules in client bundle.
+ */
+export default function LocaleSwitch({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { language } = useLanguage();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+    const elements = container.querySelectorAll<HTMLElement>('[data-locale]');
+    let hasMatch = false;
+    elements.forEach((el) => {
+      if (el.dataset.locale === language) hasMatch = true;
+    });
+    const effectiveLang = hasMatch ? language : elements[0]?.dataset.locale;
+    elements.forEach((el) => {
+      el.style.display = el.dataset.locale === effectiveLang ? '' : 'none';
+    });
+  }, [language]);
+
+  return <div ref={ref}>{children}</div>;
+}

package/src/components/MarkdownRenderer.tsx

@@ -7,19 +7,26 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeSlug from 'rehype-slug';
 import rehypeImageMetadata from '@/lib/rehype-image-metadata';
+import remarkWikilinks from '@/lib/remark-wikilinks';
 import ExportedImage from 'next-image-export-optimizer';
 import { PluggableList } from 'unified';
+import type { SlugRegistryEntry } from '@/lib/markdown';
 
 interface MarkdownRendererProps {
   content: string;
   latex?: boolean;
   slug?: string;
+  slugRegistry?: Map<string, SlugRegistryEntry>;
 }
 
-export default function MarkdownRenderer({ content, latex = false, slug }: MarkdownRendererProps) {
+export default function MarkdownRenderer({ content, latex = false, slug, slugRegistry }: MarkdownRendererProps) {
   const remarkPlugins: PluggableList = [remarkGfm];
   const rehypePlugins: PluggableList = [rehypeRaw, rehypeSlug, [rehypeImageMetadata, { slug }]];
 
+  if (slugRegistry && slugRegistry.size > 0) {
+    remarkPlugins.push([remarkWikilinks, { slugRegistry }]);
+  }
+
   if (latex) {
     remarkPlugins.push(remarkMath);
     rehypePlugins.push(rehypeKatex);
@@ -58,7 +65,11 @@ export default function MarkdownRenderer({ content, latex = false, slug }: Markd
     // Style links individually to avoid hover-all issue
     a: (props) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { node: _node, ...rest } = props as React.AnchorHTMLAttributes<HTMLAnchorElement> & ExtraProps;
+      const { node: _node, className, ...rest } = props as React.AnchorHTMLAttributes<HTMLAnchorElement> & ExtraProps;
+      // Preserve wikilink classes injected by remark-wikilinks — they have their own CSS styling
+      if (className?.includes('wikilink')) {
+        return <a {...rest} className={className} />;
+      }
       return <a {...rest} className="text-accent no-underline hover:underline transition-colors duration-200" />;
     },
     // Custom code renderer: handles 'mermaid' blocks and syntax highlighting

package/src/components/Navbar.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { siteConfig } from '../../site.config';
+import type { NavChildItem } from '../../site.config';
 import ThemeToggle from './ThemeToggle';
+import LanguageSwitch from './LanguageSwitch';
 import Search from '@/components/Search';
 import { useLanguage } from '@/components/LanguageProvider';
 import { resolveLocaleValue } from '@/lib/i18n';
@@ -19,17 +22,61 @@ interface NavbarProps {
   booksList?: NavItem[];
 }
 
+// Map from nav URL to feature key
+const FEATURE_URLS: Partial<Record<string, keyof typeof siteConfig.features>> = {
+  '/posts': 'posts',
+  '/flows': 'flows',
+  '/series': 'series',
+  '/books': 'books',
+  '/notes': 'notes',
+};
+
 export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps) {
   const { t, language } = useLanguage();
+  const pathname = usePathname();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const navItems = [...siteConfig.nav].sort((a, b) => a.weight - b.weight);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+  const navItems = [...siteConfig.nav]
+    .filter(item => {
+      const featureKey = FEATURE_URLS[item.url];
+      if (!featureKey) return true; // not a feature-gated item, always show
+      return siteConfig.features?.[featureKey]?.enabled !== false;
+    })
+    .sort((a, b) => a.weight - b.weight);
 
-  const getLabel = (name: string): string => {
+  const getLabel = (name: string, url: string): string => {
+    const featureKey = FEATURE_URLS[url];
+    if (featureKey && siteConfig.features?.[featureKey]?.name) {
+      return resolveLocaleValue(siteConfig.features[featureKey].name, language);
+    }
     const key = name.toLowerCase() as TranslationKey;
     const translated = t(key);
     return translated !== key ? translated : name;
   };
 
+  function isActive(url: string): boolean {
+    if (url === '/flows') {
+      return pathname.startsWith('/flows') || pathname.startsWith('/notes') || pathname.startsWith('/graph');
+    }
+    if (url === '/') return pathname === '/';
+    return pathname.startsWith(url);
+  }
+
+  // Scroll-aware transparency
+  useEffect(() => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 8);
+    handleScroll(); // sync with scroll position at mount (e.g. after refresh while scrolled)
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  function closeMenu() {
+    setIsMenuOpen(false);
+    setOpenDropdown(null);
+  }
+
   // Prevent body scroll when menu is open
   useEffect(() => {
     if (isMenuOpen) {
@@ -43,7 +90,11 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
   }, [isMenuOpen]);
 
   return (
-    <nav className="fixed top-0 left-0 w-full z-50 border-b border-muted/10 bg-background/80 backdrop-blur-md transition-all duration-300">
+    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 ${
+      isScrolled
+        ? 'border-muted/10 bg-background/90 backdrop-blur-md shadow-sm'
+        : 'border-transparent bg-transparent'
+    }`}>
       <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
         <Link
           href="/"
@@ -73,15 +124,18 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
               const isExternal = !!('external' in item && item.external);
               const Component = isExternal ? 'a' : Link;
               const props = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
+              const active = isActive(item.url);
 
-              if (item.name === 'Books' && booksList.length > 0) {
+              if (item.url === '/books' && booksList.length > 0) {
                 return (
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
-                      className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
+                      className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 py-4 ${
+                        active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
                     >
-                      {getLabel(item.name)}
+                      {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
                         <path d="M6 9l6 6 6-6"/>
                       </svg>
@@ -110,14 +164,16 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                 );
               }
 
-              if (item.name === 'Series' && seriesList.length > 0) {
+              if (item.url === '/series' && seriesList.length > 0) {
                 return (
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
-                      className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
+                      className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 py-4 ${
+                        active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
                     >
-                      {getLabel(item.name)}
+                      {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
                         <path d="M6 9l6 6 6-6"/>
                       </svg>
@@ -146,14 +202,56 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                 );
               }
 
+              // Static children dropdown (e.g., "More")
+              if (item.children && item.children.length > 0) {
+                const childActive = item.children.some(c => c.url && pathname.startsWith(c.url));
+                return (
+                  <div key={item.url || item.name} className="relative group">
+                    <button
+                      type="button"
+                      className={`text-sm font-sans font-medium transition-colors duration-200 flex items-center gap-1 py-4 bg-transparent border-0 cursor-pointer ${
+                        childActive ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
+                    >
+                      {getLabel(item.name, item.url)}
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
+                        <path d="M6 9l6 6 6-6"/>
+                      </svg>
+                    </button>
+                    <div className="absolute top-full right-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 min-w-[160px]">
+                      <div className="bg-background/95 backdrop-blur-md border border-muted/10 rounded-xl shadow-xl p-2 flex flex-col gap-1 animate-slide-down">
+                        {item.children.map((child: NavChildItem) => {
+                          const ChildComp = child.external ? 'a' : Link;
+                          const childProps = child.external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+                          return (
+                            <Fragment key={child.url}>
+                              {child.dividerBefore && <div className="h-px bg-muted/10 my-1" />}
+                              <ChildComp
+                                href={child.url}
+                                {...childProps}
+                                className="block px-4 py-2.5 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg transition-colors no-underline whitespace-nowrap"
+                              >
+                                {getLabel(child.name, child.url)}
+                              </ChildComp>
+                            </Fragment>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
+
               return (
                 <Component
                   key={item.url}
                   href={item.url}
                   {...props}
-                  className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1"
+                  className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 ${
+                    active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                  }`}
                 >
-                  {getLabel(item.name)}
+                  {getLabel(item.name, item.url)}
                   {isExternal && (
                     <svg
                       width="12"
@@ -197,6 +295,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
             </svg>
           </button>
           <Search />
+          <LanguageSwitch />
           <ThemeToggle />
         </div>
       </div>
@@ -207,25 +306,172 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
           {/* Backdrop */}
           <div
             className="fixed inset-0 top-16 bg-background/60 backdrop-blur-sm md:hidden"
-            onClick={() => setIsMenuOpen(false)}
+            onClick={() => closeMenu()}
           />
           {/* Menu */}
           <div className="md:hidden absolute top-16 left-0 w-full bg-background/95 backdrop-blur-md border-b border-muted/10 shadow-lg animate-slide-down">
             <div className="max-w-6xl mx-auto px-6 py-4 flex flex-col gap-1">
               {navItems.map((item) => {
                 const isExternal = !!('external' in item && item.external);
+                const active = isActive(item.url);
+
+                // Series accordion for mobile
+                if (item.url === '/series' && seriesList.length > 0) {
+                  const isOpen = openDropdown === '/series';
+                  return (
+                    <div key={item.url}>
+                      <div className={`flex items-center rounded-lg transition-colors ${active ? 'text-accent' : 'text-foreground/80'}`}>
+                        <Link
+                          href={item.url}
+                          className="flex-1 px-3 py-3 text-base font-sans font-medium no-underline hover:text-accent transition-colors"
+                          onClick={() => closeMenu()}
+                        >
+                          {getLabel(item.name, item.url)}
+                        </Link>
+                        <button
+                          className="px-3 py-3 text-foreground/60 hover:text-accent transition-colors"
+                          onClick={() => setOpenDropdown(isOpen ? null : '/series')}
+                          aria-label={isOpen ? 'Collapse series list' : 'Expand series list'}
+                          aria-expanded={isOpen}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                            <path d="M6 9l6 6 6-6"/>
+                          </svg>
+                        </button>
+                      </div>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {seriesList.map(s => (
+                            <Link
+                              key={s.slug}
+                              href={`/series/${s.slug}`}
+                              className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                              onClick={() => closeMenu()}
+                            >
+                              {s.name}
+                            </Link>
+                          ))}
+                          <Link
+                            href="/series"
+                            className="block px-3 py-2 text-xs font-bold uppercase tracking-widest text-muted hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                            onClick={() => closeMenu()}
+                          >
+                            {t('all_series')} →
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Books accordion for mobile
+                if (item.url === '/books' && booksList.length > 0) {
+                  const isOpen = openDropdown === '/books';
+                  return (
+                    <div key={item.url}>
+                      <div className={`flex items-center rounded-lg transition-colors ${active ? 'text-accent' : 'text-foreground/80'}`}>
+                        <Link
+                          href={item.url}
+                          className="flex-1 px-3 py-3 text-base font-sans font-medium no-underline hover:text-accent transition-colors"
+                          onClick={() => closeMenu()}
+                        >
+                          {getLabel(item.name, item.url)}
+                        </Link>
+                        <button
+                          className="px-3 py-3 text-foreground/60 hover:text-accent transition-colors"
+                          onClick={() => setOpenDropdown(isOpen ? null : '/books')}
+                          aria-label={isOpen ? 'Collapse books list' : 'Expand books list'}
+                          aria-expanded={isOpen}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                            <path d="M6 9l6 6 6-6"/>
+                          </svg>
+                        </button>
+                      </div>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {booksList.map(b => (
+                            <Link
+                              key={b.slug}
+                              href={`/books/${b.slug}`}
+                              className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                              onClick={() => closeMenu()}
+                            >
+                              {b.name}
+                            </Link>
+                          ))}
+                          <Link
+                            href="/books"
+                            className="block px-3 py-2 text-xs font-bold uppercase tracking-widest text-muted hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                            onClick={() => closeMenu()}
+                          >
+                            {t('all_books')} →
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Static children accordion for mobile (e.g., "More")
+                if (item.children && item.children.length > 0) {
+                  const dropdownKey = item.url || item.name;
+                  const isOpen = openDropdown === dropdownKey;
+                  const childActive = item.children.some(c => c.url && pathname.startsWith(c.url));
+                  return (
+                    <div key={dropdownKey}>
+                      <button
+                        type="button"
+                        className={`w-full flex items-center justify-between px-3 py-3 text-base font-sans font-medium rounded-lg transition-colors ${
+                          childActive ? 'text-accent' : 'text-foreground/80 hover:text-accent hover:bg-muted/5'
+                        }`}
+                        onClick={() => setOpenDropdown(isOpen ? null : dropdownKey)}
+                        aria-expanded={isOpen}
+                      >
+                        {getLabel(item.name, item.url)}
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                          <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                      </button>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {item.children.map((child: NavChildItem) => {
+                            const ChildComp = child.external ? 'a' : Link;
+                            const childProps = child.external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+                            return (
+                              <Fragment key={child.url}>
+                                {child.dividerBefore && <div className="h-px bg-muted/10 my-1" />}
+                                <ChildComp
+                                  href={child.url}
+                                  {...childProps}
+                                  className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                                  onClick={() => closeMenu()}
+                                >
+                                  {getLabel(child.name, child.url)}
+                                </ChildComp>
+                              </Fragment>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Regular mobile nav item
                 const Component = isExternal ? 'a' : Link;
                 const props = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
-
                 return (
                   <Component
                     key={item.url}
                     href={item.url}
                     {...props}
-                    className="flex items-center gap-2 px-3 py-3 text-base font-sans font-medium text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
-                    onClick={() => setIsMenuOpen(false)}
+                    className={`flex items-center gap-2 px-3 py-3 text-base font-sans font-medium rounded-lg no-underline transition-colors ${
+                      active ? 'text-accent' : 'text-foreground/80 hover:text-accent hover:bg-muted/5'
+                    }`}
+                    onClick={() => closeMenu()}
                   >
-                    {getLabel(item.name)}
+                    {getLabel(item.name, item.url)}
                     {isExternal && (
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70">
                         <path d="M7 17l9.2-9.2M17 17V7H7" />
@@ -234,6 +480,9 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                   </Component>
                 );
               })}
+              <div className="mt-2 pt-3 border-t border-muted/10 px-3">
+                <LanguageSwitch />
+              </div>
             </div>
           </div>
         </>