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

assets/built/screen.css

@@ -15,8 +15,8 @@
     --shadow: 0 8px 24px rgba(20, 16, 12, 0.035);
     --radius: 18px;
     --radius-sm: 14px;
-    --sidebar-left: 240px;
-    --sidebar-right: 320px;
+    --sidebar-left: 287px;
+    --sidebar-right: 287px;
     --content-column: 720px;
     --content-measure: 680px;
     --content-header: 720px;
@@ -88,7 +88,7 @@ input {
 
 .site-shell {
     display: grid;
-    grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
+    grid-template-columns: var(--sidebar-left) minmax(0, 1fr) var(--sidebar-right);
     min-height: calc(100vh - var(--topbar-height));
     width: min(100%, var(--shell-width));
     margin: 0 auto;
@@ -1362,36 +1362,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     border-bottom: 0;
 }
 
-@media (max-width: 1240px) {
-    .topbar {
-        width: 100%;
-        grid-template-columns: 240px minmax(0, 1fr);
-        border-left: 0;
-        border-right: 0;
-    }
-
-    .topbar__actions {
-        border-left: 0;
-    }
-
-    .site-shell {
-        width: 100%;
-        grid-template-columns: 240px minmax(0, 1fr);
-        border-left: 0;
-        border-right: 0;
-    }
-
-    body.left-sidebar-collapsed .site-shell {
-        width: min(100%, var(--content-column));
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .sidebar--right {
-        display: none;
-    }
-}
-
-@media (max-width: 960px) {
+@media (max-width: 1023px) {
     .topbar {
         grid-template-columns: 1fr;
         padding: 0 14px;
@@ -1431,13 +1402,35 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     }
 
     .site-shell {
-        grid-template-columns: 1fr;
+        width: min(100%, calc(var(--content-column) + var(--sidebar-right)));
+        grid-template-columns: minmax(0, 1fr) var(--sidebar-right);
         border-left: 0;
         border-right: 0;
     }
 
     .sidebar--left {
-        display: none;
+        position: fixed;
+        top: var(--topbar-height);
+        left: 0;
+        bottom: 0;
+        z-index: 40;
+        width: var(--sidebar-left);
+        border-right: 1px solid var(--border);
+        transform: translateX(-100%);
+        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+        box-shadow: 0 20px 40px rgba(20, 16, 12, 0.08);
+    }
+
+    body.left-sidebar-open .sidebar--left {
+        transform: translateX(0);
+    }
+
+    .left-sidebar-backdrop {
+        position: fixed;
+        inset: var(--topbar-height) 0 0;
+        z-index: 35;
+        background: rgba(17, 17, 17, 0.22);
+        backdrop-filter: blur(2px);
     }
 
     .content-area {
@@ -1477,6 +1470,25 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     }
 }
 
+@media (max-width: 767px) {
+    .site-shell {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
+
+    .sidebar--right {
+        display: block;
+        border-left: 0;
+        border-top: 1px solid var(--border);
+    }
+
+    .sidebar__inner--right {
+        position: static;
+        height: auto;
+        padding-top: 18px;
+    }
+}
+
 @media (max-width: 640px) {
     .topbar {
         padding-inline: 16px;

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]");

default.hbs

@@ -12,6 +12,7 @@
 </head>
 <body class="{{body_class}}">
     {{> "site/topbar"}}
+    <div class="left-sidebar-backdrop" data-left-sidebar-backdrop hidden></div>
     <div class="site-shell-wrap">
         <div class="site-shell">
             {{> "site/sidebar-left"}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [