115 lines
7.2 KiB
Handlebars
115 lines
7.2 KiB
Handlebars
<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">
|
|
<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>
|
|
|
|
<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">
|
|
<span class="menu-link__marker"></span>
|
|
<span class="menu-link__label">Tags</span>
|
|
</span>
|
|
</a>
|
|
</section>
|
|
|
|
<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">
|
|
<span class="menu-link__marker"></span>
|
|
<span class="menu-link__label">Authors</span>
|
|
</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="menu-group">
|
|
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
|
|
<span class="menu-link">
|
|
<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>
|
|
</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" :class="categoriesOpen ? 'rotate-180' : ''">
|
|
<img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.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">
|
|
{{#get "tags" limit="10" include="count.posts"}}
|
|
{{#foreach tags}}
|
|
<li>
|
|
<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">
|
|
<div class="sidebar-card__header">
|
|
<h2>Authors</h2>
|
|
</div>
|
|
<div class="author-list">
|
|
{{#get "authors" limit="4" include="count.posts"}}
|
|
{{#foreach authors}}
|
|
<a class="author-list__item" href="{{url}}">
|
|
{{#if profile_image}}
|
|
<img class="avatar" src="{{img_url profile_image size="xxs"}}" alt="{{name}}">
|
|
{{else}}
|
|
<span class="avatar avatar--fallback">A</span>
|
|
{{/if}}
|
|
<span class="author-list__body">
|
|
<strong>{{name}}</strong>
|
|
<small>{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</small>
|
|
</span>
|
|
</a>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="sidebar-footer">
|
|
<a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a>
|
|
<a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a>
|
|
<a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a>
|
|
<a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a>
|
|
<button class="icon-button icon-button--plain" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
|
|
</footer>
|
|
</div>
|
|
</aside>
|