theme: 홈 피드·사이드바·유저 메뉴 동작 보정

Made-with: Cursor

partials/site/sidebar-left.hbs

@@ -1,4 +1,4 @@
-<aside class="sidebar sidebar--left">
+<aside class="sidebar sidebar--left h-full flex flex-col">
         <nav class="menu-groups border-b border-brd pl-4 pr-3 sm:pl-5 xl:pl-0 py-3" data-nav="menu" data-primary-nav x-data="{ homePagesOpen: true, membersOpen: false }">
             <ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
                 <li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
@@ -78,27 +78,36 @@
             </div>
         </section>
 
-        <section class="px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5 border-b border-brd">
-            <div class="sidebar-card__header">
-                <h2>Authors</h2>
-            </div>
-            <div class="author-list">
+        <section class="sidebar-card sidebar-card--authors 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="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
+            <button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="authorsOpen = !authorsOpen" :aria-expanded="authorsOpen.toString()">
+                <span class="sidebar-card__eyebrow uppercase font-medium text-xs">Authors</span>
+                <span class="sidebar-card__chevron" aria-hidden="true">
+                    <img x-show="!authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
+                    <img x-show="authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
+                </span>
+            </button>
+            <ul class="sidebar-card__content sidebar-card__content--authors flex flex-col gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" x-cloak x-show="authorsOpen">
                 {{#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 authors}}
+                        <li>
+                            <a href="{{url}}" class="group relative flex items-center gap-1.5 leading-tight pl-0 pr-3 py-1 rounded-theme hover:text-typ hover:bg-[#f5f5f5] transition-[padding] min-h-8 md:min-h-10 hover:pl-7" aria-label="{{name}}">
+                                {{#if profile_image}}
+                                    <figure class="size-6 md:size-7 rounded-full overflow-hidden transition-all group-hover:size-0">
+                                        <img class="w-full h-full object-cover rounded-full" src="{{img_url profile_image size="s"}}" alt="">
+                                    </figure>
+                                {{else}}
+                                    <span class="size-6 md:size-7 rounded-full bg-bgr-tone flex items-center justify-center text-[11px] transition-all group-hover:size-0">A</span>
+                                {{/if}}
+                                <span class="absolute left-3.5 top-1/2 z-10 block size-2 rounded-full opacity-0 scale-75 -translate-y-1/2 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-x-0" style="background-color: var(--accent);"></span>
+                                <span class="flex-1 min-w-0 flex flex-col gap-0.5 group-hover:gap-0 overflow-hidden">
+                                    <span class="line-clamp-1 text-ellipsis leading-none">{{name}}</span>
+                                    <span class="text-xs text-typ-tone leading-none line-clamp-1 text-ellipsis opacity-75 group-hover:invisible group-hover:w-0 group-hover:h-0 group-hover:opacity-0 transition-all group-hover:translate-y-full">{{#if role}}{{role}}{{else}}Author{{/if}}</span>
+                                </span>
+                            </a>
+                        </li>
                     {{/foreach}}
                 {{/get}}
-            </div>
+            </ul>
         </section>
 
         <span class="flex-1"></span>
@@ -111,5 +120,5 @@
                 <li><a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a></li>
             </ul>
             <button class="flex items-center self-start gap-1 p-1 size-6 rounded-theme hover:bg-bgr-tone cursor-pointer text-xs font-medium" data-theme-toggle aria-label="Toggle theme">◐</button>
-        </footer>
+        </nav>
 </aside>