kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): optimize sidebar width to 200px and collapse width to 44px with clean toggle header

Browse Source
This commit is contained in:
김재현
2026-08-15 21:11:06 +09:00
parent 2d8d710d0a
commit 07a9cd3373
1 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/shell/KsSidebar.vue
+29 -16
View File
@@ -133,13 +133,15 @@ const sidebarClass = computed(() => ({
<aside aria-label="주요 메뉴" :class="['ks-sidebar', sidebarClass]"> <aside aria-label="주요 메뉴" :class="['ks-sidebar', sidebarClass]">
<!-- Header with collapse button --> <!-- Header with collapse button -->
<div class="ks-sidebar__header"> <div class="ks-sidebar__header">
<span v-if="!collapsed" class="ks-sidebar__title">주요 메뉴</span>
<button <button
type="button" type="button"
class="ks-sidebar__collapse-btn" class="ks-sidebar__collapse-btn"
:aria-label="collapsed ? '사이드바 펴기' : '사이드바 접기'" :title="collapsed ? '메뉴 펼치기' : '메뉴 접기'"
:aria-label="collapsed ? '메뉴 펼치기' : '메뉴 접기'"
@click="handleToggleCollapse" @click="handleToggleCollapse"
> >
{{ collapsed ? '›' : '‹' }} {{ collapsed ? '▶' : '◀ 접기' }}
</button> </button>
</div> </div>
@@ -212,41 +214,52 @@ const sidebarClass = computed(() => ({
<style scoped> <style scoped>
.ks-sidebar { .ks-sidebar {
width: 280px; width: var(--ks-shell-sidebar-width, 200px);
background-color: var(--color-background-secondary); background-color: var(--color-background-secondary);
border-right: 1px solid var(--color-border-primary); border-right: 1px solid var(--color-border-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
flex-shrink: 0;
} }
.ks-sidebar--collapsed { .ks-sidebar--collapsed {
width: 80px; width: var(--ks-shell-sidebar-collapsed, 44px);
} }
.ks-sidebar__header { .ks-sidebar__header {
padding: var(--spacing-4); padding: var(--ks-space-2) var(--ks-space-3);
border-bottom: 1px solid var(--color-border-primary); border-bottom: 1px solid var(--color-border-primary);
display: flex; display: flex;
justify-content: flex-end; align-items: center;
justify-content: space-between;
height: 38px;
box-sizing: border-border-box;
}
.ks-sidebar__title {
font-size: var(--ks-font-caption);
font-weight: 700;
color: var(--ks-color-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
} }
.ks-sidebar__collapse-btn { .ks-sidebar__collapse-btn {
background-color: var(--color-background-primary); background-color: transparent;
border: 1px solid var(--color-border-primary); border: 1px solid var(--ks-color-border);
font-size: 24px; font-size: 11px;
cursor: pointer; cursor: pointer;
color: var(--color-text-primary); color: var(--ks-color-text-muted);
padding: var(--spacing-1); padding: 2px 6px;
border-radius: var(--border-radius-base); border-radius: var(--ks-radius-sm);
transition: all var(--transition-base); transition: var(--ks-transition-fast);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; height: 24px;
height: 40px;
} }
.ks-sidebar__collapse-btn:hover { .ks-sidebar__collapse-btn:hover {