Merge pull request #19 from barocss/feat/language-switcher-and-mobile

feat: 문서 언어 스위처 노출 및 모바일 반응형 개선

Author: easylogic

packages/theme-docs/src/components/DocHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Search, Menu, Moon, Sun, Github } from "lucide-react";
+import { Search, Menu, Moon, Sun, Github, Globe, ChevronDown } from "lucide-react";
 import { Button } from "./ui/button";
 import { Separator } from "./ui/separator";
 import {
@@ -17,17 +17,56 @@ interface DocHeaderProps {
   hasMultipleLocales?: boolean;
   currentLocale?: string;
   localeLabels?: Record<string, string>;
+  currentPath?: string;
+  locales?: string[];
+  defaultLocale?: string;
+}
+
+function getLocalizedUrl(
+  path: string,
+  locale: string,
+  defaultLocale: string,
+): string {
+  const docsPrefix = "/docs/";
+  const koPrefix = "/docs/ko/";
+
+  if (path.startsWith(koPrefix)) {
+    path = path === "/docs/ko" ? "/docs" : docsPrefix + path.slice(koPrefix.length);
+  }
+
+  if (locale === defaultLocale) {
+    return path || "/";
+  }
+  if (path === "/" || !path.startsWith(docsPrefix)) {
+    return path === "/" ? "/docs/ko/introduction" : path;
+  }
+  return docsPrefix + "ko/" + path.slice(docsPrefix.length);
 }
 
 export function DocHeader({
   siteName,
   logo,
   githubUrl,
   hasMultipleLocales,
-  currentLocale,
-  localeLabels,
+  currentLocale = "en",
+  localeLabels = {},
+  currentPath = "",
+  locales = [],
+  defaultLocale = "en",
 }: DocHeaderProps) {
   const [theme, setTheme] = React.useState<"light" | "dark">("light");
+  const [langOpen, setLangOpen] = React.useState(false);
+  const langRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const close = (e: MouseEvent) => {
+      if (langRef.current && !langRef.current.contains(e.target as Node)) {
+        setLangOpen(false);
+      }
+    };
+    document.addEventListener("click", close);
+    return () => document.removeEventListener("click", close);
+  }, []);
 
   React.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
@@ -51,21 +90,21 @@ export function DocHeader({
 
   return (
     <TooltipProvider>
-      <header className="sticky top-0 z-50 w-full border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-bg)]/80">
-        <div className="flex h-14 items-center justify-between px-4 max-w-[1120px] mx-auto">
+      <header className="sticky top-0 z-50 w-full min-w-0 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-bg)]/80">
+        <div className="flex h-14 items-center justify-between gap-2 px-3 sm:px-4 max-w-[1120px] mx-auto min-w-0">
           {/* Logo */}
-          <div className="flex items-center gap-6">
+          <div className="flex items-center gap-6 min-w-0 shrink">
             <a
               href="/"
-              className="flex items-center gap-2.5 font-semibold text-[var(--color-text)] hover:opacity-80 transition-opacity"
+              className="flex items-center gap-2 min-w-0 shrink overflow-hidden font-semibold text-[var(--color-text)] hover:opacity-80 transition-opacity"
             >
-              {logo && <img src={logo} alt={siteName} className="h-7 w-7" />}
-              <span className="text-lg">{siteName}</span>
+              {logo && <img src={logo} alt={siteName} className="h-7 w-7 shrink-0" />}
+              <span className="text-lg truncate">{siteName}</span>
             </a>
           </div>
 
           {/* Right side actions */}
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1 shrink-0">
             {/* Search button */}
             <Button
               variant="outline"
@@ -124,6 +163,57 @@ export function DocHeader({
               </Tooltip>
             )}
 
+            {/* Language switcher */}
+            {hasMultipleLocales && locales.length > 0 && (
+              <>
+                <Separator orientation="vertical" className="hidden md:block h-6 mx-2" />
+                <div className="relative" ref={langRef}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className="rounded-xl gap-1 px-2"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setLangOpen((o) => !o);
+                        }}
+                      >
+                        <Globe className="h-4 w-4" />
+                        <span className="text-sm hidden sm:inline">
+                          {localeLabels[currentLocale] ?? currentLocale}
+                        </span>
+                        <ChevronDown className="h-3 w-3" />
+                        <span className="sr-only">Language</span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Language</TooltipContent>
+                  </Tooltip>
+                  {langOpen && (
+                    <div
+                      className="absolute right-0 mt-1 py-1 min-w-[8rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] shadow-lg z-50"
+                      role="menu"
+                    >
+                      {locales.map((locale) => (
+                        <a
+                          key={locale}
+                          href={getLocalizedUrl(currentPath, locale, defaultLocale)}
+                          className={cn(
+                            "block px-3 py-2 text-sm transition-colors",
+                            locale === currentLocale
+                              ? "bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"
+                              : "text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
+                          )}
+                          role="menuitem"
+                        >
+                          {localeLabels[locale] ?? locale}
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
             {/* Theme toggle */}
             <Tooltip>
               <TooltipTrigger asChild>

packages/theme-docs/src/components/Header.astro

@@ -1,17 +1,16 @@
 ---
 import { DocHeader } from "./DocHeader";
-import LanguageSwitcher from "./LanguageSwitcher.astro";
 import config from "virtual:barodoc/config";
 import { locales, defaultLocale } from "virtual:barodoc/i18n";
 
 interface Props {
   currentLocale?: string;
+  currentPath?: string;
 }
 
-const { currentLocale = defaultLocale } = Astro.props;
+const { currentLocale = defaultLocale, currentPath = "" } = Astro.props;
 const hasMultipleLocales = locales.length > 1;
 
-// Build locale labels from config
 const localeLabels: Record<string, string> = config.i18n?.labels || {};
 ---
 
@@ -23,10 +22,7 @@ const localeLabels: Record<string, string> = config.i18n?.labels || {};
   hasMultipleLocales={hasMultipleLocales}
   currentLocale={currentLocale}
   localeLabels={localeLabels}
+  currentPath={currentPath}
+  locales={locales}
+  defaultLocale={defaultLocale}
 />
-
-{hasMultipleLocales && (
-  <div class="hidden">
-    <LanguageSwitcher currentLocale={currentLocale} />
-  </div>
-)}

packages/theme-docs/src/layouts/DocsLayout.astro

@@ -30,22 +30,22 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
 ---
 
 <BaseLayout title={title} description={description}>
-  <Header currentLocale={currentLocale} />
+  <Header currentLocale={currentLocale} currentPath={currentPath} />
 
   <!-- Centered container for docs layout -->
-  <div class="w-full min-h-[calc(100vh-3.5rem)] flex justify-center">
-    <div class="flex w-full max-w-[1120px]">
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center overflow-x-hidden">
+    <div class="flex w-full max-w-[1120px] min-w-0">
       <!-- Desktop Sidebar -->
       <aside class="hidden lg:block w-[220px] shrink-0">
         <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-6 pr-4">
           <Sidebar currentPath={currentPath} currentLocale={currentLocale} />
         </div>
       </aside>
 
-      <!-- Main Content -->
-      <main class="flex-1 min-w-0 min-w-[650px] max-w-[720px]">
-        <div class="px-8 py-8">
-          <article class="prose prose-gray dark:prose-invert max-w-none">
+      <!-- Main Content: no min-width on mobile to avoid horizontal scroll -->
+      <main class="flex-1 min-w-0 lg:min-w-[650px] max-w-[720px]">
+        <div class="px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-8">
+          <article class="prose prose-gray dark:prose-invert max-w-none min-w-0 overflow-x-auto">
             <slot />
           </article>
 

packages/theme-docs/src/styles/global.css

@@ -63,6 +63,7 @@
     background-color: var(--color-bg);
     color: var(--color-text);
     font-feature-settings: "rlig" 1, "calt" 1;
+    overflow-x: hidden;
   }
 
   /* Smooth transitions for all interactive elements */