사이드바: Secondary navigation 아코디언 그룹 추가 (v0.2.7)

Made-with: Cursor
2026-04-17 10:29:07 +09:00
parent 2a72bb29f9
commit 24f065e67e
9 changed files with 36 additions and 8 deletions
--- a/assets/built/tailwind.css
+++ b/assets/built/tailwind.css
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,7 +1,7 @@
 # 배포 가이드

 ## 현재 버전
- `v0.2.6`
+- `v0.2.7`

 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,8 @@
 # 의사결정 이력

+## 2026-04-17 v0.2.7
+Ghost 관리자의 Secondary navigation은 기본 테마 헬퍼만으로는 출력 위치가 없어 활용되지 않았다. Primary와 동일한 `ul.nav` 스타일을 재사용하려면 `Home pages` 블록과 같은 아코디언 래퍼 안에 `{{navigation type="secondary"}}`를 두고, 항목이 없을 때는 빈 UI가 나오지 않도록 `{{#if @site.secondary_navigation}}`으로 감싸는 방식이 가장 단순하다.
+
 ## 2026-04-17 v0.2.6
 Thred 참고 마크업은 `before:` 가상 요소로 세로 막대를 그리지만, Tailwind 조합만 쓰면 `content`가 비어 있어 `::before` 박스가 생성되지 않아 배경색이 보이지 않는 경우가 있다. 동일한 시각은 `border-left: solid var(--color-accent)`로 더 단순하고 태그 디렉터리 카드와도 맞추기 쉬워서, 홈 Categories 행은 `.home-categories__row` 컴포넌트 규칙으로 왼쪽 테두리만 사용하도록 바꿨다.

--- a/docs/map.md
+++ b/docs/map.md
@@ -1,11 +1,11 @@
 # 파일-화면 매핑 가이드

 ## 현재 버전
- `v0.2.6`
+- `v0.2.7`

 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드
- [partials/site/sidebar-left.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-left.hbs): 좌측 탐색/직접 링크형 Tags·Authors 메뉴/카테고리 아코디언/푸터
+- [partials/site/sidebar-left.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-left.hbs): 좌측 탐색(Primary `{{navigation}}`, Secondary `{{navigation type="secondary"}}`·`@site.secondary_navigation` 있을 때만)/Tags/카테고리 아코디언/푸터
 - [page-tags.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/page-tags.hbs): `slug=tags` 페이지용 태그 디렉터리
 - [tags-index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/tags-index.hbs): `/tags/` 커스텀 라우트용 태그 디렉터리
 - [partials/site/topbar.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/topbar.hbs): 상단 3열 헤더, 중앙 검색, 좌측 사이드바 토글
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -1,7 +1,7 @@
 # 기술 명세

 ## 현재 버전
- `v0.2.6`
+- `v0.2.7`

 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -13,6 +13,7 @@
 - `home`, `index`, `tag`, `author`, `post`, `page` 템플릿
 - 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트
 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
+- 좌측 사이드바 `menu-groups`: Primary는 `Home pages` 아코디언 안에 `{{navigation}}`, Secondary(관리자에 항목이 있을 때만)는 그 아래 `More links` 아코디언 안에 `{{navigation type="secondary"}}`로 동일 마크업(`ul.nav`)을 노출함
 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
 - Tailwind 기본 초기화(`preflight`)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 로그

+## v0.2.7 - 2026-04-17
+- `package.json` 버전을 `0.2.7`로 증가.
+- `partials/site/sidebar-left.hbs`: `@site.secondary_navigation`이 있을 때 `Home pages` 아래에 `More links` 아코디언 그룹을 추가하고 `{{navigation type="secondary"}}`로 Secondary 링크를 노출.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.7`로 동기화.
+- `docs/history.md`에 Secondary 네비 사이드바 노출(`v0.2.7`) 기록.
+
 ## v0.2.6 - 2026-04-17
 - `package.json` 버전을 `0.2.6`으로 증가.
 - 홈 Categories 좌측 색 막대: `::before`+`before:bg-accent` 제거, `tailwind.css`의 `.home-categories__row`로 `border-left: 3px solid var(--color-accent)` 적용(가상 요소 `content` 누락으로 색이 안 보이던 문제 해소).
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ghost-theme-thred-clone",
-  "version": "0.2.6",
+  "version": "0.2.7",
  "private": true,
  "description": "A Ghost theme inspired by the Thred reference layout.",
  "keywords": [
--- a/partials/site/sidebar-left.hbs
+++ b/partials/site/sidebar-left.hbs
@@ -1,5 +1,5 @@
 <aside class="sidebar sidebar--left h-full flex flex-col">
-        <nav class="menu-groups border-b border-brd pl-4 pr-3 sm:pl-5 xl:pl-0 py-3" data-nav="menu" data-primary-nav x-data="{ homePagesOpen: true, membersOpen: false }">
+        <nav class="menu-groups border-b border-brd pl-4 pr-3 sm:pl-5 xl:pl-0 py-3" data-nav="menu" data-primary-nav x-data="{ homePagesOpen: true, secondaryNavOpen: true, membersOpen: false }">
            <ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
                <li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
                    <a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="homePagesOpen = !homePagesOpen" :aria-expanded="homePagesOpen.toString()" aria-haspopup="true">
@@ -17,6 +17,24 @@
                    </div>
                </li>

+                {{#if @site.secondary_navigation}}
+                <li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group menu-group--secondary-nav" :class="{ 'is-open': secondaryNavOpen }" data-label="More links" data-slug="secondary-nav" aria-haspopup="true">
+                    <a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="secondaryNavOpen = !secondaryNavOpen" :aria-expanded="secondaryNavOpen.toString()" aria-haspopup="true">
+                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
+                        <span class="menu-link__label">More links</span>
+                    </a>
+                    <button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="secondary-nav" :aria-expanded="secondaryNavOpen.toString()" @click="secondaryNavOpen = !secondaryNavOpen" aria-haspopup="true">
+                        <img x-show="!secondaryNavOpen" x-cloak class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
+                        <img x-show="secondaryNavOpen" x-cloak class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
+                    </button>
+                    <div class="menu-group__panel basis-full overflow-hidden transition-[height,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]" x-ref="secondaryNav" :style="secondaryNavOpen ? 'height:' + $refs.secondaryNav.scrollHeight + 'px; opacity:1; visibility:visible;' : 'height:0px; opacity:0; visibility:hidden;'">
+                        <div class="menu-group__content menu-group__content--nav" id="secondary-nav">
+                            {{navigation type="secondary"}}
+                        </div>
+                    </div>
+                </li>
+                {{/if}}
+
                <li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Tags" data-slug="tags" data-length="4">
                    <a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/tags/">
                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
--- a/partials/site/sidebar-right.hbs
+++ b/partials/site/sidebar-right.hbs
@@ -130,7 +130,7 @@
        {{/is}}
        <span class="flex-1"></span>
        <footer class="px-5 sm:px-6 xl:pr-1">
-            <div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs">
+            <div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs font-blod text-gray-800">
                ©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.
            </div>
        </footer>