refactor: 상단 헤더 네비게이션을 좌측 사이드바로 전환
추후 메뉴 확장을 고려해 AppShell 레이아웃을 사이드바 구조로 변경한다. - 좌측 사이드바: 브랜드 + 세로 네비(내 업무/프로젝트, 아이콘) + 하단 사용자 프로필·메뉴(위로 펼침) - 우측 본문 컬럼: 슬림 툴바(페이지 액션 슬롯 + AI/검색/알림) + 기존 페이지 슬롯 - 알림 드롭다운·AI 패널 동작은 그대로 유지(.page 본문은 컬럼 내 중앙 정렬) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+356
-240
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
// 앱 공통 셸 — 상단 탑바(브랜드/네비/우측 액션) + 본문 슬롯
|
||||
// 앱 공통 셸 — 좌측 사이드바(브랜드/네비/사용자) + 우측 본문 컬럼(상단 툴바 + 슬롯)
|
||||
// 모든 인증 이후 화면이 이 레이아웃을 공유한다.
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -14,10 +14,10 @@ const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// AI 채팅 패널 — 모든 화면 헤더에서 열 수 있다
|
||||
// AI 채팅 패널 — 모든 화면 툴바에서 열 수 있다
|
||||
const agentOpen = ref(false)
|
||||
|
||||
// 현재 경로 기준으로 상단 네비 활성 항목을 판별
|
||||
// 현재 경로 기준으로 사이드바 네비 활성 항목을 판별
|
||||
const activeNav = computed<'tasks' | 'projects'>(() =>
|
||||
route.path.startsWith('/projects') ? 'projects' : 'tasks',
|
||||
)
|
||||
@@ -63,188 +63,96 @@ async function onLogout() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="topbar">
|
||||
<RouterLink
|
||||
to="/projects"
|
||||
class="brand"
|
||||
>
|
||||
<div class="logo">
|
||||
R
|
||||
</div>
|
||||
Relay
|
||||
</RouterLink>
|
||||
|
||||
<nav class="topnav">
|
||||
<RouterLink
|
||||
to="/tasks"
|
||||
:class="{ active: activeNav === 'tasks' }"
|
||||
>
|
||||
내 업무
|
||||
</RouterLink>
|
||||
<div class="shell">
|
||||
<!-- 좌측 사이드바 -->
|
||||
<aside class="sidebar">
|
||||
<RouterLink
|
||||
to="/projects"
|
||||
:class="{ active: activeNav === 'projects' }"
|
||||
class="brand"
|
||||
>
|
||||
프로젝트
|
||||
<div class="logo">
|
||||
R
|
||||
</div>
|
||||
<span class="brand-name">Relay</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="topbar-right">
|
||||
<!-- 화면별 추가 액션을 끼워 넣는 슬롯 -->
|
||||
<slot name="actions" />
|
||||
|
||||
<!-- AI 어시스턴트 — 모든 화면에서 상시 노출 -->
|
||||
<button
|
||||
class="icon-btn agent"
|
||||
type="button"
|
||||
title="AI 어시스턴트"
|
||||
aria-label="AI 어시스턴트"
|
||||
@click="agentOpen = true"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
|
||||
<path d="M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
title="검색"
|
||||
aria-label="검색"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="11"
|
||||
cy="11"
|
||||
r="7"
|
||||
/>
|
||||
<path d="m21 21-4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="noti-wrap">
|
||||
<button
|
||||
class="icon-btn noti-btn"
|
||||
type="button"
|
||||
title="알림"
|
||||
aria-label="알림"
|
||||
aria-haspopup="menu"
|
||||
:aria-expanded="notiOpen"
|
||||
@click="notiOpen = !notiOpen"
|
||||
<nav class="sidenav">
|
||||
<RouterLink
|
||||
to="/tasks"
|
||||
class="nav-item"
|
||||
:class="{ active: activeNav === 'tasks' }"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
|
||||
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
|
||||
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
|
||||
<rect
|
||||
x="9"
|
||||
y="3"
|
||||
width="6"
|
||||
height="4"
|
||||
rx="1"
|
||||
/>
|
||||
<path d="M9 13l2 2 4-4" />
|
||||
</svg>
|
||||
<span
|
||||
v-if="unreadCount > 0"
|
||||
class="noti-badge"
|
||||
:aria-label="`읽지 않은 알림 ${unreadCount}건`"
|
||||
>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
|
||||
</button>
|
||||
|
||||
<!-- 알림 드롭다운 -->
|
||||
<div
|
||||
v-if="notiOpen"
|
||||
class="noti-panel"
|
||||
role="menu"
|
||||
<span>내 업무</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/projects"
|
||||
class="nav-item"
|
||||
:class="{ active: activeNav === 'projects' }"
|
||||
>
|
||||
<div class="noti-head">
|
||||
<span class="noti-title">알림</span>
|
||||
<button
|
||||
v-if="unreadCount > 0"
|
||||
type="button"
|
||||
class="noti-readall"
|
||||
@click="notiStore.markAllRead()"
|
||||
>
|
||||
모두 읽음
|
||||
</button>
|
||||
</div>
|
||||
<div class="noti-list">
|
||||
<div
|
||||
v-if="notiLoading && notiViews.length === 0"
|
||||
class="noti-empty"
|
||||
>
|
||||
불러오는 중…
|
||||
</div>
|
||||
<div
|
||||
v-else-if="notiViews.length === 0"
|
||||
class="noti-empty"
|
||||
>
|
||||
새 알림이 없습니다.
|
||||
</div>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="v in notiViews"
|
||||
:key="v.id"
|
||||
type="button"
|
||||
class="noti-item"
|
||||
:class="{ unread: !v.read }"
|
||||
role="menuitem"
|
||||
@click="onNotiClick(v)"
|
||||
>
|
||||
<span
|
||||
class="noti-dot"
|
||||
:class="`tone-${v.tone || 'none'}`"
|
||||
/>
|
||||
<span class="noti-body">
|
||||
<!-- noti-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 한 뒤 신뢰 태그(<b>)만 조립한 마크업이다 (XSS 위험 없음) -->
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<span
|
||||
class="noti-text"
|
||||
v-html="v.html"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span class="noti-time">{{ v.time }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="notiHasMore"
|
||||
type="button"
|
||||
class="noti-more"
|
||||
:disabled="notiLoadingMore"
|
||||
@click="notiStore.loadMore()"
|
||||
>
|
||||
{{ notiLoadingMore ? '불러오는 중…' : '더보기' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 메뉴 바깥 클릭 시 닫기 -->
|
||||
<div
|
||||
v-if="notiOpen"
|
||||
class="noti-overlay"
|
||||
@click="notiOpen = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="me-wrap">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1.5"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1.5"
|
||||
/>
|
||||
<rect
|
||||
x="3"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1.5"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1.5"
|
||||
/>
|
||||
</svg>
|
||||
<span>프로젝트</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<!-- 하단 사용자 프로필 + 메뉴(위로 펼침) -->
|
||||
<div class="side-bottom">
|
||||
<button
|
||||
class="me"
|
||||
class="side-me"
|
||||
type="button"
|
||||
:title="me?.name ?? '사용자'"
|
||||
:aria-label="`${me?.name ?? '사용자'} 메뉴`"
|
||||
aria-haspopup="menu"
|
||||
:aria-expanded="menuOpen"
|
||||
@@ -254,22 +162,17 @@ async function onLogout() {
|
||||
:url="me?.avatarUrl"
|
||||
:name="me?.name"
|
||||
/>
|
||||
<span class="side-me-text">
|
||||
<span class="side-me-name">{{ me?.name }}</span>
|
||||
<span class="side-me-email">{{ me?.email }}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- 사용자 드롭다운 -->
|
||||
<div
|
||||
v-if="menuOpen"
|
||||
class="me-menu"
|
||||
class="me-menu side-menu"
|
||||
role="menu"
|
||||
>
|
||||
<div class="me-info">
|
||||
<div class="me-name">
|
||||
{{ me?.name }}
|
||||
</div>
|
||||
<div class="me-email">
|
||||
{{ me?.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="me-action"
|
||||
type="button"
|
||||
@@ -279,36 +182,201 @@ async function onLogout() {
|
||||
로그아웃
|
||||
</button>
|
||||
</div>
|
||||
<!-- 메뉴 바깥 클릭 시 닫기 -->
|
||||
<div
|
||||
v-if="menuOpen"
|
||||
class="me-overlay"
|
||||
@click="menuOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 우측 본문 컬럼 -->
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<!-- 화면별 추가 액션을 끼워 넣는 슬롯 -->
|
||||
<slot name="actions" />
|
||||
|
||||
<div class="topbar-right">
|
||||
<!-- AI 어시스턴트 — 모든 화면에서 상시 노출 -->
|
||||
<button
|
||||
class="icon-btn agent"
|
||||
type="button"
|
||||
title="AI 어시스턴트"
|
||||
aria-label="AI 어시스턴트"
|
||||
@click="agentOpen = true"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
|
||||
<path d="M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
title="검색"
|
||||
aria-label="검색"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="11"
|
||||
cy="11"
|
||||
r="7"
|
||||
/>
|
||||
<path d="m21 21-4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="noti-wrap">
|
||||
<button
|
||||
class="icon-btn noti-btn"
|
||||
type="button"
|
||||
title="알림"
|
||||
aria-label="알림"
|
||||
aria-haspopup="menu"
|
||||
:aria-expanded="notiOpen"
|
||||
@click="notiOpen = !notiOpen"
|
||||
>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
|
||||
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
|
||||
</svg>
|
||||
<span
|
||||
v-if="unreadCount > 0"
|
||||
class="noti-badge"
|
||||
:aria-label="`읽지 않은 알림 ${unreadCount}건`"
|
||||
>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
|
||||
</button>
|
||||
|
||||
<!-- 알림 드롭다운 -->
|
||||
<div
|
||||
v-if="notiOpen"
|
||||
class="noti-panel"
|
||||
role="menu"
|
||||
>
|
||||
<div class="noti-head">
|
||||
<span class="noti-title">알림</span>
|
||||
<button
|
||||
v-if="unreadCount > 0"
|
||||
type="button"
|
||||
class="noti-readall"
|
||||
@click="notiStore.markAllRead()"
|
||||
>
|
||||
모두 읽음
|
||||
</button>
|
||||
</div>
|
||||
<div class="noti-list">
|
||||
<div
|
||||
v-if="notiLoading && notiViews.length === 0"
|
||||
class="noti-empty"
|
||||
>
|
||||
불러오는 중…
|
||||
</div>
|
||||
<div
|
||||
v-else-if="notiViews.length === 0"
|
||||
class="noti-empty"
|
||||
>
|
||||
새 알림이 없습니다.
|
||||
</div>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="v in notiViews"
|
||||
:key="v.id"
|
||||
type="button"
|
||||
class="noti-item"
|
||||
:class="{ unread: !v.read }"
|
||||
role="menuitem"
|
||||
@click="onNotiClick(v)"
|
||||
>
|
||||
<span
|
||||
class="noti-dot"
|
||||
:class="`tone-${v.tone || 'none'}`"
|
||||
/>
|
||||
<span class="noti-body">
|
||||
<!-- noti-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 한 뒤 신뢰 태그(<b>)만 조립한 마크업이다 (XSS 위험 없음) -->
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<span
|
||||
class="noti-text"
|
||||
v-html="v.html"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span class="noti-time">{{ v.time }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="notiHasMore"
|
||||
type="button"
|
||||
class="noti-more"
|
||||
:disabled="notiLoadingMore"
|
||||
@click="notiStore.loadMore()"
|
||||
>
|
||||
{{ notiLoadingMore ? '불러오는 중…' : '더보기' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 메뉴 바깥 클릭 시 닫기 -->
|
||||
<div
|
||||
v-if="notiOpen"
|
||||
class="noti-overlay"
|
||||
@click="notiOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- AI 채팅 패널 — 헤더 어디서든 열림 -->
|
||||
<AgentChatPanel
|
||||
:open="agentOpen"
|
||||
@close="agentOpen = false"
|
||||
/>
|
||||
<!-- AI 채팅 패널 — 어디서든 열림 -->
|
||||
<AgentChatPanel
|
||||
:open="agentOpen"
|
||||
@close="agentOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
height: 3.25rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
.shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.75rem;
|
||||
padding: 0 1.25rem;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ===== 좌측 사이드바 ===== */
|
||||
.sidebar {
|
||||
width: 14.5rem;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.875rem 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
@@ -321,6 +389,7 @@ async function onLogout() {
|
||||
letter-spacing: -0.0125rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 1.125rem 0.875rem;
|
||||
}
|
||||
.brand .logo {
|
||||
width: 1.625rem;
|
||||
@@ -335,31 +404,108 @@ async function onLogout() {
|
||||
box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
|
||||
}
|
||||
|
||||
.topnav {
|
||||
.sidenav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1875rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
.topnav a {
|
||||
gap: 0.6875rem;
|
||||
padding: 0.5625rem 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
font-size: 0.844rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding: 0.4375rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.topnav a:hover {
|
||||
.nav-item svg {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: #f1f2f4;
|
||||
color: var(--text);
|
||||
}
|
||||
.topnav a.active {
|
||||
color: var(--accent);
|
||||
.nav-item.active {
|
||||
background: var(--accent-weak);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 사이드바 하단 사용자 프로필 */
|
||||
.side-bottom {
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
padding: 0.625rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.side-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5625rem;
|
||||
width: 100%;
|
||||
padding: 0.4375rem 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
.side-me:hover {
|
||||
background: #f1f2f4;
|
||||
}
|
||||
.side-me > :first-child {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.side-me-text {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.0625rem;
|
||||
}
|
||||
.side-me-name {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.side-me-email {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text-3);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== 우측 본문 컬럼 ===== */
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 3.25rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0 1.25rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
.topbar-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
@@ -553,30 +699,9 @@ async function onLogout() {
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
.me-wrap {
|
||||
position: relative;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.me {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 0.719rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
/* 내부 UserAvatar 가 이미지/placeholder 로 배경을 채운다(버튼 자체 배경 없음) */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 드롭다운 메뉴 */
|
||||
/* 사용자 드롭다운(사이드바 하단 → 위로 펼침) */
|
||||
.me-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
z-index: 60;
|
||||
min-width: 11rem;
|
||||
background: var(--panel);
|
||||
@@ -585,19 +710,10 @@ async function onLogout() {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
.me-info {
|
||||
padding: 0.75rem 0.875rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.me-name {
|
||||
font-size: 0.844rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.me-email {
|
||||
margin-top: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-3);
|
||||
.side-menu {
|
||||
left: 0.625rem;
|
||||
right: 0.625rem;
|
||||
bottom: calc(100% - 0.25rem);
|
||||
}
|
||||
.me-action {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user