43 lines
2.9 KiB
Handlebars
43 lines
2.9 KiB
Handlebars
<header class="topbar border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
|
||
<div class="topbar__inner mx-auto">
|
||
<div class="topbar__brand flex h-full items-center gap-3 px-4">
|
||
<button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme hover:bg-bgr-tone" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
|
||
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
|
||
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
|
||
</button>
|
||
<a class="brand brand--topbar inline-flex items-center gap-2.5 whitespace-nowrap" href="{{@site.url}}">
|
||
<span class="brand__name">{{@site.title}}</span>
|
||
</a>
|
||
</div>
|
||
<div class="topbar__search flex h-full items-center justify-center px-4">
|
||
<button class="search-trigger flex w-full max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
|
||
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||
<span>Search</span>
|
||
<span class="search-shortcut">/</span>
|
||
</button>
|
||
</div>
|
||
<div class="topbar__actions flex h-full items-center justify-end gap-2 px-4">
|
||
<button class="icon-button icon-button--search-mobile inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone" type="button" data-search-open aria-label="Open search">
|
||
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||
</button>
|
||
{{#if @custom.show_admin_link}}
|
||
<a class="button button--accent rounded-theme" href="/ghost/">Admin</a>
|
||
<a class="icon-button icon-button--profile rounded-full border border-brd bg-bgr hover:bg-bgr-tone" href="/ghost/" aria-label="Ghost admin"><span></span></a>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="search-modal" data-search-modal hidden>
|
||
<div class="search-modal__backdrop" data-search-close></div>
|
||
<div class="search-modal__panel">
|
||
<div class="search-modal__input">
|
||
<button type="button" class="icon-button icon-button--plain" data-search-close aria-label="Close search">×</button>
|
||
<input type="search" placeholder="게시물, 태그, 작성자 검색" data-search-input>
|
||
</div>
|
||
<div class="search-modal__body" data-search-results>
|
||
<p class="search-modal__hint">현재 페이지에 표시되는 게시물, 태그 및 작성자를 필터링하려면 입력을 시작하세요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|