v0.1.15 반응형 레이아웃 및 오버 사이드 수정

assets/built/theme.js

@@ -66,13 +66,67 @@
     });
 
     var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
+    var leftSidebarBackdrop = document.querySelector("[data-left-sidebar-backdrop]");
+    var tabletMedia = window.matchMedia("(max-width: 1023px)");
+
+    function syncLeftSidebarState() {
+        var isOverlay = tabletMedia.matches;
+        var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
+
+        if (leftSidebarToggle) {
+            leftSidebarToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        }
+
+        if (leftSidebarBackdrop) {
+            leftSidebarBackdrop.hidden = !isOverlay || !isOpen;
+        }
+    }
+
+    function openLeftSidebar() {
+        if (tabletMedia.matches) {
+            body.classList.add("left-sidebar-open");
+        } else {
+            body.classList.remove("left-sidebar-collapsed");
+        }
+        syncLeftSidebarState();
+    }
+
+    function closeLeftSidebar() {
+        if (tabletMedia.matches) {
+            body.classList.remove("left-sidebar-open");
+        } else {
+            body.classList.add("left-sidebar-collapsed");
+        }
+        syncLeftSidebarState();
+    }
+
     if (leftSidebarToggle) {
         leftSidebarToggle.addEventListener("click", function () {
-            var collapsed = body.classList.toggle("left-sidebar-collapsed");
-            leftSidebarToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+            var isOverlay = tabletMedia.matches;
+            var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
+
+            if (isOpen) {
+                closeLeftSidebar();
+            } else {
+                openLeftSidebar();
+            }
         });
     }
 
+    if (leftSidebarBackdrop) {
+        leftSidebarBackdrop.addEventListener("click", function () {
+            closeLeftSidebar();
+        });
+    }
+
+    if (tabletMedia.addEventListener) {
+        tabletMedia.addEventListener("change", syncLeftSidebarState);
+    } else if (tabletMedia.addListener) {
+        tabletMedia.addListener(syncLeftSidebarState);
+    }
+
+    syncLeftSidebarState();
+
     var tabRoot = document.querySelector("[data-tabs]");
     if (tabRoot) {
         var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");