feat(sidebar): update CSS for composable compound component
Add collapsed state styles (sidebarCollapsed, collapseToggle), icon-rail mode (sectionRailItem, sectionIcon), and width transition. Remove old monolithic classes (navArea, section, items, item, navIcon, routeArrow, all starred-section styles). Pin footer with margin-top: auto. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -5,6 +5,36 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: width 200ms ease;
|
||||
}
|
||||
|
||||
.sidebarCollapsed {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
/* Collapse toggle */
|
||||
.collapseToggle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--sidebar-muted);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
|
||||
.collapseToggle:hover {
|
||||
color: var(--sidebar-text);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
@@ -15,6 +45,12 @@
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebarCollapsed .logo {
|
||||
padding: 16px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logoImg {
|
||||
@@ -106,71 +142,40 @@
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Scrollable nav area */
|
||||
.navArea {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Section headers */
|
||||
.section {
|
||||
padding: 14px 12px 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
/* Section icon (collapsed rail) */
|
||||
.sectionIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
color: var(--sidebar-muted);
|
||||
}
|
||||
|
||||
/* Items container */
|
||||
.items {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
/* Nav item (flat links like Dashboards) */
|
||||
.item {
|
||||
/* Rail item (collapsed sidebar section) */
|
||||
.sectionRailItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--sidebar-text);
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
border-left: 3px solid transparent;
|
||||
margin-bottom: 1px;
|
||||
user-select: none;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
.sectionRailItem:hover {
|
||||
background: var(--sidebar-hover);
|
||||
color: #e8dfd4;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
background: var(--sidebar-active);
|
||||
color: var(--amber);
|
||||
.sectionRailItemActive {
|
||||
border-left-color: var(--amber);
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
font-size: 14px;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
color: var(--sidebar-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item.active .navIcon {
|
||||
.sectionRailItemActive .sectionIcon {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.routeArrow {
|
||||
color: var(--sidebar-muted);
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
.treeSectionActive {
|
||||
border-left-color: var(--amber);
|
||||
}
|
||||
|
||||
/* Item sub-elements */
|
||||
@@ -383,100 +388,13 @@
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
/* ── Starred section ─────────────────────────────────────────────────────── */
|
||||
|
||||
.starredSection {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.starredHeader {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.starredList {
|
||||
padding: 0 6px 6px;
|
||||
}
|
||||
|
||||
.starredGroup {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.starredGroupLabel {
|
||||
padding: 4px 12px 2px;
|
||||
font-size: 10px;
|
||||
color: var(--sidebar-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.starredItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--sidebar-text);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.starredItem:hover {
|
||||
background: var(--sidebar-hover);
|
||||
}
|
||||
|
||||
.starredItemInfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.starredItemName {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.starredItemContext {
|
||||
font-size: 10px;
|
||||
color: var(--sidebar-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Remove button */
|
||||
.starredRemove {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
color: var(--sidebar-muted);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.starredItem:hover .starredRemove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.starredRemove:hover {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* ── Bottom links ────────────────────────────────────────────────────────── */
|
||||
|
||||
.bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 6px;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.bottomItem {
|
||||
|
||||
Reference in New Issue
Block a user