zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.13 상단 토글 및 좌측 패널 구조 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 17:53:47 +09:00
parent 07e714e5a2
commit 5daf14c133
4 changed files with 58 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
assets/built/screen.css
View File

@@ -125,72 +125,15 @@ input {
overflow-y: auto;
}
.sidebar-left__toolbar {
display: flex;
justify-content: flex-end;
padding-top: 12px;
body.left-sidebar-collapsed .site-shell {
width: calc(var(--content-column) + var(--sidebar-right));
grid-template-columns: minmax(0, var(--content-column)) var(--sidebar-right);
}
.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 {
body.left-sidebar-collapsed .sidebar--left {
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;
@@ -525,6 +468,51 @@ body.left-sidebar-collapsed .sidebar--left .menu-link {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
}
.topbar__sidebar-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;
padding: 0;
}
.topbar__sidebar-toggle:hover {
background: var(--surface-muted);
}
.topbar__sidebar-toggle-icon {
width: 18px;
height: 18px;
display: block;
}
.topbar__sidebar-toggle-icon--close {
display: none;
}
body.left-sidebar-collapsed .topbar__sidebar-toggle-icon--open {
display: block;
}
body.left-sidebar-collapsed .topbar__sidebar-toggle-icon--close {
display: none;
}
body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--open {
display: none;
}
body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
display: block;
}
.topbar__search {
@@ -1377,9 +1365,9 @@ body.left-sidebar-collapsed .sidebar--left .menu-link {
border-right: 0;
}
body.left-sidebar-collapsed .site-shell,
body.left-sidebar-collapsed .topbar {
grid-template-columns: 56px minmax(0, 1fr);
body.left-sidebar-collapsed .site-shell {
width: min(100%, var(--content-column));
grid-template-columns: minmax(0, 1fr);
}
.sidebar--right {

2
package.json
View File

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

6
partials/site/sidebar-left.hbs
View File

@@ -1,11 +1,5 @@
<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">

11
partials/site/topbar.hbs
View File

@@ -1,12 +1,11 @@
<header class="topbar">
<div class="topbar__brand">
<button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
</button>
<a class="brand brand--topbar" href="{{@site.url}}">
{{#if @site.logo}}
<img class="brand__logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<span class="brand__mark"></span>
<span class="brand__name">{{@site.title}}</span>
{{/if}}
<span class="brand__name">{{@site.title}}</span>
</a>
</div>
<div class="topbar__search">