theme: 홈 피드·사이드바·유저 메뉴 동작 보정
Made-with: Cursor
This commit is contained in:
@@ -16,10 +16,96 @@
|
||||
<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="">
|
||||
<div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4">
|
||||
<button class="icon-button icon-button--user-menu inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone overflow-hidden" type="button" aria-label="Open user menu" data-user-menu-toggle>
|
||||
{{#if @member}}
|
||||
{{#if @member.avatar_image}}
|
||||
<img class="w-full h-full object-cover" src="{{@member.avatar_image}}" alt="{{@member.name}}">
|
||||
{{else}}
|
||||
<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" role="presentation" aria-hidden="true">
|
||||
<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>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<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" role="presentation" aria-hidden="true">
|
||||
<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>
|
||||
{{/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>
|
||||
<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 bg-bgr-tone">
|
||||
{{#if @member}}
|
||||
{{#if @member.avatar_image}}
|
||||
<img class="size-8 md:size-10 object-cover" src="{{@member.avatar_image}}" alt="{{@member.name}}">
|
||||
{{else}}
|
||||
<span class="size-8 md:size-10 flex items-center justify-center uppercase font-normal text-base md:text-lg">@</span>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="size-8 md:size-10 flex items-center justify-center uppercase font-normal text-base md:text-lg">@</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="flex gap-0.5 flex-col">
|
||||
<div class="line-clamp-1 text-ellipsis leading-[1.15] max-w-xs">{{#if @member}}{{@member.name}}{{else}}Anonymous{{/if}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#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="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="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>Sign up</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="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="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>Sign in</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 rounded-full border-2 border-transparent bg-brd" data-user-theme-track>
|
||||
<span aria-hidden="true" class="pointer-events-none inline-block size-3.5 transform rounded-full bg-white shadow ring-0 transition" 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 rounded-full border-2 border-transparent bg-brd" data-user-menu-track>
|
||||
<span aria-hidden="true" class="pointer-events-none inline-block size-3.5 transform rounded-full bg-white shadow ring-0 transition" 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>
|
||||
|
||||
Reference in New Issue
Block a user