v0.1.2 헤더 구조 및 사이드바 효과 수정

This commit is contained in:
2026-04-13 10:44:56 +09:00
parent 890b3c1902
commit fab60c0c89
6 changed files with 295 additions and 103 deletions

View File

@@ -1,35 +1,32 @@
<aside class="sidebar sidebar--left">
<div class="sidebar__inner">
<a class="brand" 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}}
</a>
<nav class="menu-groups">
<section class="menu-group is-open">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Home pages</span>
<span></span>
<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">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
{{navigation}}
</div>
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Tags</span>
<span></span>
<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">Tags</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
{{#get "tags" limit="6" include="count.posts"}}
{{#foreach tags}}
<li><a href="{{url}}">{{name}}</a></li>
<li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
{{/foreach}}
{{/get}}
</ul>
@@ -37,15 +34,18 @@
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Authors</span>
<span></span>
<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">Authors</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
{{#get "authors" limit="6" include="count.posts"}}
{{#foreach authors}}
<li><a href="{{url}}">{{name}}</a></li>
<li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
{{/foreach}}
{{/get}}
</ul>
@@ -53,15 +53,18 @@
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Members</span>
<span></span>
<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">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
<li><a href="#/portal/signup">Sign up</a></li>
<li><a href="#/portal/signin">Sign in</a></li>
<li><a href="#/portal/account">Account</a></li>
<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>

View File

@@ -1,4 +1,14 @@
<header class="topbar">
<div class="topbar__brand">
<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}}
</a>
</div>
<div class="topbar__search">
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
<span class="search-trigger__icon">⌕</span>
@@ -7,6 +17,7 @@
</button>
</div>
<div class="topbar__actions">
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
{{#if @member}}
<a class="button button--accent" href="#/portal/account">Account</a>
{{else}}