172 lines
15 KiB
Handlebars
172 lines
15 KiB
Handlebars
<header class="topbar px-3 xl:px-0 sticky top-0 z-20 w-full border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
|
||
<div class="w-full max-w-[1294px] h-full flex justify-between items-center mx-auto gap-4">
|
||
<div class="topbar__brand flex h-full items-center gap-3">
|
||
<button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme group" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
|
||
<span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open">
|
||
<i class="icon icon-layout-sidebar size-6 stroke-2" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4l0 16"></path></svg>
|
||
</i>
|
||
</span>
|
||
<span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open-hover">
|
||
<i class="icon icon-layout-sidebar-expand size-6 stroke-2" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar-left-expand"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg>
|
||
</i>
|
||
</span>
|
||
<span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close">
|
||
<i class="icon icon-layout-sidebar-active size-6 stroke-0 fill-current" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm12 -16h-8v14h8a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1"></path></svg>
|
||
</i>
|
||
</span>
|
||
<span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close-hover">
|
||
<i class="icon icon-layout-sidebar-collapse size-6 stroke-0 fill-current" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z"></path></svg>
|
||
</i>
|
||
</span>
|
||
</button>
|
||
<a class="brand brand--topbar inline-flex min-w-0 max-w-full items-center gap-2.5 lg:hidden" href="{{@site.url}}">
|
||
{{#if @site.logo}}
|
||
<img class="max-h-8 w-auto object-contain" src="{{@site.logo}}" alt="{{@site.title}}">
|
||
{{else}}
|
||
<span class="brand__name">{{@site.title}}</span>
|
||
{{/if}}
|
||
</a>
|
||
</div>
|
||
<div class="topbar-search topbar__search flex h-full min-w-0 items-center justify-center flex-1">
|
||
<button class="search-trigger flex w-full min-w-0 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">
|
||
<i class="icon-search flex justify-center items-center shrink-0 size-5 md:size-4 stroke-2 md:stroke-[2.25] fill-bgr-tone [&>svg]:fill-inherit" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||
<circle cx="10" cy="10" r="7"></circle>
|
||
<line x1="21" y1="21" x2="15" y2="15"></line>
|
||
</svg>
|
||
</i>
|
||
<span class="search-trigger__label">Search</span>
|
||
<span class="search-shortcut shrink-0">/</span>
|
||
</button>
|
||
</div>
|
||
<div class="topbar__actions relative flex h-full items-center justify-end gap-2">
|
||
<button class="w-8 h-8 cursor-pointer icon-button--user-menu inline-flex items-center justify-center rounded-theme overflow-hidden {{#unless @member}}bg-bgr hover:bg-bgr-tone{{/unless}}" type="button" aria-label="Open user menu" data-user-menu-toggle>
|
||
{{#if @member}}
|
||
<figure class="relative w-8 h-8 pointer-events-none" data-member-avatar-figure>
|
||
<div class="flex items-center justify-center rounded-full w-8 h-8" data-member-avatar-background>
|
||
<p class="font-sans text-base font-semibold text-typ" data-member-avatar-initial data-member-avatar-seed="{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}member{{/if}}{{/if}}">{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}M{{/if}}{{/if}}</p>
|
||
</div>
|
||
<img alt="Avatar" class="absolute left-0 top-0 rounded-full w-8 h-8 object-cover {{#unless @member.avatar_image}}hidden{{/unless}}" data-member-avatar-image src="{{@member.avatar_image}}">
|
||
</figure>
|
||
{{else}}
|
||
<i class="icon icon-user pointer-events-none flex items-center justify-center w-full h-full [&_svg]:w-[62%] [&_svg]:h-[62%]" role="presentation" aria-hidden="true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
||
<path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
||
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
|
||
</svg>
|
||
</i>
|
||
{{/if}}
|
||
</button>
|
||
<div class="z-50 p-3 pb-2 flex flex-col text-sm bg-bgr border border-brd rounded-theme absolute top-12 right-0 -translate-y-4 opacity-0 invisible pointer-events-none transition-[transform,opacity,visibility,scale] min-w-[200px] max-w-xs overflow-hidden font-medium scale-95 shadow-md" style="background-color: var(--bg);" data-user-menu>
|
||
{{#if @member}}
|
||
<div class="flex items-center gap-2 border-b border-brd pb-3 mb-2">
|
||
<div class="size-8 md:size-10 rounded-full overflow-hidden flex items-center justify-center">
|
||
<figure class="relative w-8 h-8 md:w-10 md:h-10 pointer-events-none" data-member-avatar-figure>
|
||
<div class="flex items-center justify-center rounded-full w-8 h-8 md:w-10 md:h-10" data-member-avatar-background>
|
||
<p class="font-sans text-base font-semibold text-typ" data-member-avatar-initial data-member-avatar-seed="{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}member{{/if}}{{/if}}">{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}M{{/if}}{{/if}}</p>
|
||
</div>
|
||
<img alt="Avatar" class="absolute left-0 top-0 rounded-full w-8 h-8 md:w-10 md:h-10 object-cover {{#unless @member.avatar_image}}hidden{{/unless}}" data-member-avatar-image src="{{@member.avatar_image}}">
|
||
</figure>
|
||
</div>
|
||
<div class="flex gap-0.5 flex-col">
|
||
<div class="line-clamp-1 text-ellipsis leading-[1.15] max-w-xs" data-member-name-display>{{#if @member.name}}{{@member.name}}{{else}}Member{{/if}}</div>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
{{#if @member}}
|
||
<a href="#/portal/account" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
|
||
<i class="icon icon-login size-5 stroke-2" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||
<path d="M9 6l6 0"></path>
|
||
<path d="M12 3l0 6"></path>
|
||
<path d="M5 12a7 7 0 0 0 14 0a7 7 0 0 0 -14 0"></path>
|
||
</svg>
|
||
</i>
|
||
<span>Account</span>
|
||
</a>
|
||
{{else}}
|
||
<a href="#/portal/signup" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
|
||
<i class="icon icon-signup size-5 stroke-2" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
||
<path d="M15 9l-6 6"></path>
|
||
<path d="M15 15v-6h-6"></path>
|
||
</svg>
|
||
</i>
|
||
<span>회원 가입</span>
|
||
</a>
|
||
<a href="#/portal/signin" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
|
||
<i class="icon icon-login size-5 stroke-2" role="presentation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||
<path d="M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
|
||
<path d="M21 12h-13l3 -3"></path>
|
||
<path d="M11 15l-3 -3"></path>
|
||
</svg>
|
||
</i>
|
||
<span>로그인</span>
|
||
</a>
|
||
{{/if}}
|
||
<div class="flex flex-col gap-0.5 items-center justify-between border-t border-brd mt-2 pt-2">
|
||
<button class="group flex items-center justify-between gap-1.5 py-1 pl-0.5 rounded-theme w-full cursor-pointer text-typ-tone hover:text-typ" type="button" data-user-theme-toggle>
|
||
<span class="uppercase text-xs">Dark mode</span>
|
||
<span class="inline-flex h-[18px] w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-brd transition-colors duration-200 group-focus:outline-none group-focus:ring-0" data-user-theme-track>
|
||
<span aria-hidden="true" class="pointer-events-none inline-block size-3.5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200" data-user-theme-thumb></span>
|
||
</span>
|
||
</button>
|
||
<button class="group flex items-center justify-between gap-1.5 py-1 pl-0.5 rounded-theme w-full cursor-pointer text-typ-tone hover:text-typ" type="button" data-user-menu-state-toggle>
|
||
<span class="uppercase text-xs">Menu open</span>
|
||
<span class="inline-flex h-[18px] w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-brd transition-colors duration-200 group-focus:outline-none group-focus:ring-0" data-user-menu-track>
|
||
<span aria-hidden="true" class="pointer-events-none inline-block size-3.5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200" data-user-menu-thumb></span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{{#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-reset aria-label="Clear 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>
|
||
|
||
<div hidden data-search-source>
|
||
{{#get "authors" limit="100"}}
|
||
{{#foreach authors}}
|
||
<span data-search-item data-search-type="author" data-search-title="{{name}}" data-search-url="{{url}}" data-search-image="{{#if profile_image}}{{img_url profile_image size='s' absolute='true'}}{{/if}}"></span>
|
||
{{/foreach}}
|
||
{{/get}}
|
||
{{#get "tags" limit="100"}}
|
||
{{#foreach tags}}
|
||
<span data-search-item data-search-type="tag" data-search-title="{{name}}" data-search-url="{{url}}"></span>
|
||
{{/foreach}}
|
||
{{/get}}
|
||
{{#get "posts" limit="150"}}
|
||
{{#foreach posts}}
|
||
<span data-search-item data-search-type="post" data-search-title="{{title}}" data-search-url="{{url}}" data-search-excerpt="{{excerpt words='24'}}"></span>
|
||
{{/foreach}}
|
||
{{/get}}
|
||
</div>
|