zeakd · zeakd · Mar 20, 2026 · Mar 20, 2026
diff --git a/packages/astro-component-docs/src/components/Example.astro b/packages/astro-component-docs/src/components/Example.astro
@@ -71,4 +71,18 @@ const { __code, title } = Astro.props;
     margin: 0;
     border-radius: 0;
   }
+
+  @media (max-width: 768px) {
+    .acd-example-preview {
+      padding: 1rem;
+    }
+
+    .acd-example-title {
+      padding: 0.5rem 0.75rem;
+    }
+
+    .acd-example-code {
+      font-size: 0.8125rem;
+    }
+  }
 </style>
diff --git a/packages/astro-component-docs/src/components/PropsTable.astro b/packages/astro-component-docs/src/components/PropsTable.astro
@@ -16,6 +16,7 @@ const doc: ComponentDoc | undefined = propsData[key];
 {doc ? (
   <div class="acd-props">
     {doc.description && <p class="acd-props-description">{doc.description}</p>}
+    <div class="acd-props-table-wrap">
     <table class="acd-props-table">
       <thead>
         <tr>
@@ -44,6 +45,7 @@ const doc: ComponentDoc | undefined = propsData[key];
         ))}
       </tbody>
     </table>
+    </div>
   </div>
 ) : (
   <div class="acd-props-error">
@@ -56,6 +58,11 @@ const doc: ComponentDoc | undefined = propsData[key];
     margin: 1.5rem 0;
   }
 
+  .acd-props-table-wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .acd-props-description {
     margin-bottom: 1rem;
     color: var(--acd-text-muted, #64748b);
@@ -101,4 +108,15 @@ const doc: ComponentDoc | undefined = propsData[key];
     color: #991b1b;
     font-size: 0.875rem;
   }
+
+  @media (max-width: 768px) {
+    .acd-props-table th,
+    .acd-props-table td {
+      padding: 0.375rem 0.5rem;
+    }
+
+    .acd-props-table {
+      font-size: 0.8125rem;
+    }
+  }
 </style>
diff --git a/website/src/layouts/DocsLayout.astro b/website/src/layouts/DocsLayout.astro
@@ -56,18 +56,27 @@ navigation.sort(
   <body>
     <header class="site-header">
       <div class="site-header-inner">
-        <a href={`${import.meta.env.BASE_URL}/`} class="site-logo">
-          <svg width="22" height="25" viewBox="0 0 158 182" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M105.423 15.2554L79 0L12.2551 38.5352L49.3537 146.046L111.099 97.2991L105.423 15.2554ZM111.433 102.131L50.7358 150.051L57.4715 169.571L79 182L115.501 160.926L111.433 102.131ZM46.0282 148.671L8.72658 40.5724L0.19165 45.5V136.5L35.5712 156.926L46.0282 148.671ZM39.2998 159.079L47.4103 152.676L52.1873 166.52L39.2998 159.079ZM115.235 99.1299L157.808 65.5197V136.5L119.357 158.7L115.235 99.1299ZM157.808 60.4234L114.901 94.2976L109.6 17.6667L157.808 45.5V60.4234Z" fill="url(#logo-grad)"/>
-            <defs>
-              <linearGradient id="logo-grad" x1="0.5" y1="46" x2="79" y2="182" gradientUnits="userSpaceOnUse">
-                <stop stop-color="#66DE6F"/>
-                <stop offset="1" stop-color="#66DEDE"/>
-              </linearGradient>
-            </defs>
-          </svg>
-          React Naver Maps
-        </a>
+        <div class="site-header-left">
+          <button class="sidebar-toggle" id="sidebar-toggle">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+          <a href={`${import.meta.env.BASE_URL}/`} class="site-logo">
+            <svg width="22" height="25" viewBox="0 0 158 182" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M105.423 15.2554L79 0L12.2551 38.5352L49.3537 146.046L111.099 97.2991L105.423 15.2554ZM111.433 102.131L50.7358 150.051L57.4715 169.571L79 182L115.501 160.926L111.433 102.131ZM46.0282 148.671L8.72658 40.5724L0.19165 45.5V136.5L35.5712 156.926L46.0282 148.671ZM39.2998 159.079L47.4103 152.676L52.1873 166.52L39.2998 159.079ZM115.235 99.1299L157.808 65.5197V136.5L119.357 158.7L115.235 99.1299ZM157.808 60.4234L114.901 94.2976L109.6 17.6667L157.808 45.5V60.4234Z" fill="url(#logo-grad)"/>
+              <defs>
+                <linearGradient id="logo-grad" x1="0.5" y1="46" x2="79" y2="182" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#66DE6F"/>
+                  <stop offset="1" stop-color="#66DEDE"/>
+                </linearGradient>
+              </defs>
+            </svg>
+            React Naver Maps
+          </a>
+        </div>
         <nav class="site-header-nav">
           <div class="site-version-dropdown">
             <select onchange="if(this.value) window.location.href = this.value">
@@ -87,6 +96,7 @@ navigation.sort(
         </nav>
       </div>
     </header>
+    <div class="sidebar-overlay" id="sidebar-overlay"></div>
 
     <div class="site-container">
       <aside class="site-sidebar">
@@ -123,6 +133,17 @@ navigation.sort(
   </body>
 </html>
 
+<script is:inline>
+  document.getElementById('sidebar-toggle').addEventListener('click', function() {
+    document.querySelector('.site-sidebar').classList.toggle('open');
+    document.getElementById('sidebar-overlay').classList.toggle('visible');
+  });
+  document.getElementById('sidebar-overlay').addEventListener('click', function() {
+    document.querySelector('.site-sidebar').classList.remove('open');
+    this.classList.remove('visible');
+  });
+</script>
+
 <style>
   .site-header {
     position: sticky;
@@ -143,6 +164,31 @@ navigation.sort(
     padding: 0 1.5rem;
   }
 
+  .site-header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .sidebar-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: none;
+    color: var(--acd-text-muted);
+    cursor: pointer;
+  }
+
+  .sidebar-toggle:hover {
+    background: var(--acd-bg-subtle);
+    color: var(--acd-text);
+  }
+
   .site-logo {
     display: flex;
     align-items: center;
@@ -177,6 +223,18 @@ navigation.sort(
     color: var(--acd-text-muted);
   }
 
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 19;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .sidebar-overlay.visible {
+    display: block;
+  }
+
   .site-container {
     display: flex;
     max-width: 1440px;
@@ -306,4 +364,48 @@ navigation.sort(
     border-radius: 4px;
     overflow-x: auto;
   }
+
+  @media (max-width: 768px) {
+    .sidebar-toggle {
+      display: flex;
+    }
+
+    .site-header-inner {
+      padding: 0 1rem;
+    }
+
+    .site-logo {
+      font-size: 1.125rem;
+    }
+
+    .site-sidebar {
+      position: fixed;
+      top: var(--site-header-height);
+      left: 0;
+      z-index: 20;
+      width: 280px;
+      height: calc(100vh - var(--site-header-height));
+      background: #fff;
+      transform: translateX(-100%);
+      transition: transform 0.25s ease;
+      border-right: 1px solid var(--acd-border);
+    }
+
+    .site-sidebar.open {
+      transform: translateX(0);
+    }
+
+    .site-main {
+      padding: 1.5rem 1rem 3rem;
+    }
+
+    .site-content :global(h1) {
+      font-size: 1.5rem;
+    }
+
+    .site-content :global(th),
+    .site-content :global(td) {
+      padding: 0.375rem 0.5rem;
+    }
+  }
 </style>