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

v0.1.23 좌측 네비 및 태그 라우트 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 10:43:24 +09:00
parent f746480163
commit 615dd8968d
11 changed files with 215 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,59 +1,57 @@
<aside class="sidebar sidebar--left">
<div class="sidebar__inner">
<nav class="menu-groups">
<section class="menu-group is-open">
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="true">
<span class="menu-link">
<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 }">
<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">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Home pages</span>
</span>
<span class="menu-group__chevron" aria-hidden="true">
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
</span>
</button>
<div class="menu-group__content" data-accordion-content>
{{navigation}}
</div>
</section>
</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="home-pages" :aria-expanded="homePagesOpen.toString()" @click="homePagesOpen = !homePagesOpen" aria-haspopup="true">
<img x-show="!homePagesOpen" x-cloak class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img x-show="homePagesOpen" 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="homePages" :style="homePagesOpen ? 'height:' + $refs.homePages.scrollHeight + 'px; opacity:1; visibility:visible;' : 'height:0px; opacity:0; visibility:hidden;'">
<div class="menu-group__content menu-group__content--nav" id="home-pages">
{{navigation}}
</div>
</div>
</li>
<section class="menu-group menu-group--link">
<a class="menu-group__link px-3 py-2 flex items-center rounded-[15px] transition-[padding,background-color,color] hover:bg-[var(--surface-muted)] hover:px-4" href="/tags/">
<span class="menu-link">
<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"></span>
<span class="menu-link__label">Tags</span>
</span>
</a>
</section>
</a>
</li>
<section class="menu-group menu-group--link">
<a class="menu-group__link px-3 py-2 flex items-center rounded-[15px] transition-[padding,background-color,color] hover:bg-[var(--surface-muted)] hover:px-4" href="/authors/">
<span class="menu-link">
<li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Authors" data-slug="authors" data-length="7">
<a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/authors/">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Authors</span>
</span>
</a>
</section>
</a>
</li>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
<span class="menu-link">
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': membersOpen }" data-label="Members" data-slug="members" data-length="7" 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="membersOpen = !membersOpen" :aria-expanded="membersOpen.toString()" aria-haspopup="true">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Members</span>
</span>
<span class="menu-group__chevron" aria-hidden="true">
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
</span>
</button>
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
<li><a class="menu-sub-link" href="#/portal/signup">Sign up</a></li>
<li><a class="menu-sub-link" href="#/portal/signin">Sign in</a></li>
<li><a class="menu-sub-link" href="#/portal/account">Account</a></li>
</ul>
</div>
</section>
</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="members" :aria-expanded="membersOpen.toString()" @click="membersOpen = !membersOpen" aria-haspopup="true">
<img x-show="!membersOpen" x-cloak class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img x-show="membersOpen" 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="members" :style="membersOpen ? 'height:' + $refs.members.scrollHeight + 'px; opacity:1; visibility:visible;' : 'height:0px; opacity:0; visibility:hidden;'">
<div class="menu-group__content menu-group__content--nav" id="members">
<ul class="link-list">
<li><a class="menu-sub-link" href="#/portal/signup">Sign up</a></li>
<li><a class="menu-sub-link" href="#/portal/signin">Sign in</a></li>
<li><a class="menu-sub-link" href="#/portal/account">Account</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<section class="sidebar-card sidebar-card--categories border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ categoriesOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { categoriesOpen = window.innerWidth >= 1024 })" data-sidebar-categories>