v0.1.12 사이드바 토글 및 모바일 상세 수정

assets/built/screen.css

@@ -94,6 +94,7 @@ input {
     margin: 0 auto;
     border-left: 1px solid var(--border);
     border-right: 1px solid var(--border);
+    transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .site-shell-wrap {
@@ -124,6 +125,72 @@ input {
     overflow-y: auto;
 }
 
+.sidebar-left__toolbar {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 12px;
+}
+
+.sidebar-left__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 0;
+    background: transparent;
+    color: var(--text-dim);
+    cursor: pointer;
+    border-radius: 8px;
+}
+
+.sidebar-left__toggle:hover {
+    background: var(--surface-muted);
+}
+
+.sidebar-left__toggle-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.sidebar-left__toggle-icon--close {
+    display: none;
+}
+
+body.left-sidebar-collapsed .site-shell,
+body.left-sidebar-collapsed .topbar {
+    grid-template-columns: 56px minmax(0, var(--content-column)) var(--sidebar-right);
+}
+
+body.left-sidebar-collapsed .sidebar-left__toggle-icon--open {
+    display: none;
+}
+
+body.left-sidebar-collapsed .sidebar-left__toggle-icon--close {
+    display: block;
+}
+
+body.left-sidebar-collapsed .sidebar--left .menu-link__label,
+body.left-sidebar-collapsed .sidebar--left .menu-group__content,
+body.left-sidebar-collapsed .sidebar--left .sidebar-card,
+body.left-sidebar-collapsed .sidebar--left .sidebar-footer {
+    opacity: 0;
+    pointer-events: none;
+}
+
+body.left-sidebar-collapsed .sidebar--left .menu-group__trigger {
+    justify-content: center;
+    padding-inline: 0;
+}
+
+body.left-sidebar-collapsed .sidebar--left .menu-group__chevron {
+    display: none;
+}
+
+body.left-sidebar-collapsed .sidebar--left .menu-link {
+    justify-content: center;
+}
+
 .sidebar__inner--right {
     display: flex;
     flex-direction: column;
@@ -182,7 +249,7 @@ input {
 .menu-group__content {
     height: 0;
     padding: 0;
-    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: height;
     overflow: hidden;
 }
@@ -896,7 +963,7 @@ input {
 .site-intro {
     display: grid;
     grid-template-columns: 54px minmax(0, 1fr);
-    gap: 14px;
+    gap: 12px;
     align-items: center;
     padding-top: 18px;
     padding-bottom: 18px;
@@ -912,7 +979,7 @@ input {
 .copyright {
     margin: 0;
     color: var(--text-soft);
-    line-height: 1.55;
+    line-height: 1.48;
 }
 
 .social-row {
@@ -985,6 +1052,15 @@ input {
     flex: 1;
 }
 
+.author-feature__body h3 {
+    font-size: 14px;
+    line-height: 1.25;
+}
+
+.author-feature__body p {
+    font-size: 13px;
+}
+
 .author-feature__action {
     color: var(--text-dim);
     font-size: 13px;
@@ -1056,6 +1132,8 @@ input {
 .post-feature-image img {
     width: 100%;
     border-radius: 14px;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
 }
 
 .post-body {
@@ -1299,6 +1377,11 @@ input {
         border-right: 0;
     }
 
+    body.left-sidebar-collapsed .site-shell,
+    body.left-sidebar-collapsed .topbar {
+        grid-template-columns: 56px minmax(0, 1fr);
+    }
+
     .sidebar--right {
         display: none;
     }
@@ -1442,6 +1525,11 @@ input {
         line-height: 1.08;
     }
 
+    .post-feature-image img {
+        border-radius: 12px;
+        aspect-ratio: 4 / 3;
+    }
+
     .tab-row-wrap {
         gap: 10px;
     }

assets/built/theme.js

@@ -65,6 +65,14 @@
         });
     });
 
+    var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
+    if (leftSidebarToggle) {
+        leftSidebarToggle.addEventListener("click", function () {
+            var collapsed = body.classList.toggle("left-sidebar-collapsed");
+            leftSidebarToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+        });
+    }
+
     var tabRoot = document.querySelector("[data-tabs]");
     if (tabRoot) {
         var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");

assets/icons/left_panel_close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>

assets/icons/left_panel_open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>

package.json

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

partials/site/sidebar-left.hbs

@@ -1,5 +1,11 @@
 <aside class="sidebar sidebar--left">
     <div class="sidebar__inner">
+        <div class="sidebar-left__toolbar">
+            <button class="sidebar-left__toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Collapse left sidebar">
+                <img class="sidebar-left__toggle-icon sidebar-left__toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
+                <img class="sidebar-left__toggle-icon sidebar-left__toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
+            </button>
+        </div>
         <nav class="menu-groups">
             <section class="menu-group is-open">
                 <button class="menu-group__trigger" type="button" data-accordion aria-expanded="true">