128 lines
12 KiB
Handlebars
128 lines
12 KiB
Handlebars
<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 }">
|
|
<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 w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
|
<span class="menu-link__label">Home pages</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="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>
|
|
|
|
<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>
|
|
<span class="menu-link__label">Tags</span>
|
|
</a>
|
|
</li>
|
|
|
|
<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 w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
|
<span class="menu-link__label">Authors</span>
|
|
</a>
|
|
</li>
|
|
|
|
<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 w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
|
|
<span class="menu-link__label">Members</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="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>
|
|
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="categoriesOpen = !categoriesOpen" :aria-expanded="categoriesOpen.toString()">
|
|
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
|
|
<span class="sidebar-card__chevron" aria-hidden="true">
|
|
<img x-show="!categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
|
<img x-show="categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
|
</span>
|
|
</button>
|
|
<div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
|
|
<ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" data-category-priority-list
|
|
data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books"
|
|
data-category-priority-limit="11">
|
|
{{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
|
|
{{#foreach tags}}
|
|
<li data-category-priority-item data-category-slug="{{slug}}">
|
|
<a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
|
|
<span class="category-chip__dot w-1 h-4 bg-accent rounded-sm rounded-l-none group-hover:size-2 group-hover:rounded-full transition-all"></span>
|
|
<span class="category-chip__label flex-1 line-clamp-1 text-ellipsis">{{name}}</span>
|
|
<span class="category-chip__count text-xs opacity-0 invisible group-hover:opacity-100 group-hover:visible font-medium">{{count.posts}}</span>
|
|
</a>
|
|
</li>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{{!-- 작가 목록 섹션 (주석으로 유지) --}}
|
|
{{!-- <section class="sidebar-card sidebar-card--authors 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="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
|
|
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="authorsOpen = !authorsOpen" :aria-expanded="authorsOpen.toString()">
|
|
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Authors</span>
|
|
<span class="sidebar-card__chevron" aria-hidden="true">
|
|
<img x-show="!authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
|
<img x-show="authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
|
</span>
|
|
</button>
|
|
<ul class="sidebar-card__content sidebar-card__content--authors flex flex-col gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" x-cloak x-show="authorsOpen">
|
|
{{#get "authors" limit="4" include="count.posts"}}
|
|
{{#foreach authors}}
|
|
<li>
|
|
<a href="{{url}}" class="group relative flex items-center gap-1.5 leading-tight pl-0 pr-3 py-1 rounded-theme hover:text-typ hover:bg-[#f5f5f5] transition-[padding] min-h-8 md:min-h-10 hover:pl-7" aria-label="{{name}}">
|
|
{{#if profile_image}}
|
|
<figure class="size-6 md:size-7 rounded-full overflow-hidden transition-all group-hover:size-0">
|
|
<img class="w-full h-full object-cover rounded-full" src="{{img_url profile_image size="s"}}" alt="">
|
|
</figure>
|
|
{{else}}
|
|
<span class="size-6 md:size-7 rounded-full bg-bgr-tone flex items-center justify-center text-[11px] transition-all group-hover:size-0">A</span>
|
|
{{/if}}
|
|
<span class="absolute left-3.5 top-1/2 z-10 block size-2 rounded-full opacity-0 scale-75 -translate-y-1/2 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-x-0" style="background-color: var(--accent);"></span>
|
|
<span class="flex-1 min-w-0 flex flex-col gap-0.5 group-hover:gap-0 overflow-hidden">
|
|
<span class="line-clamp-1 text-ellipsis leading-none">{{name}}</span>
|
|
<span class="text-xs text-typ-tone leading-none line-clamp-1 text-ellipsis opacity-75 group-hover:invisible group-hover:w-0 group-hover:h-0 group-hover:opacity-0 transition-all group-hover:translate-y-full">{{#if role}}{{role}}{{else}}Author{{/if}}</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</ul>
|
|
</section> --}}
|
|
|
|
<span class="flex-1"></span>
|
|
|
|
<nav class="pl-4 pr-3 sm:pl-5 xl:pl-1 py-2 flex items-center justify-between gap-2">
|
|
<ul class="flex flex-wrap items-center gap-3 text-typ-tone text-xs mb-2">
|
|
<li><a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a></li>
|
|
<li><a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a></li>
|
|
<li><a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a></li>
|
|
<li><a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a></li>
|
|
</ul>
|
|
<button class="flex items-center self-start gap-1 p-1 size-6 rounded-theme hover:bg-bgr-tone cursor-pointer text-xs font-medium" data-theme-toggle aria-label="Toggle theme">◐</button>
|
|
</nav>
|
|
</aside>
|