stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity

Redesign sidebar navigation with warmer UX and smoother animations

Browse Source 
- Add amber dot indicators to group headers with hover scale effect
- Replace hard divider lines with gradient fade separators
- Active nav item gets rounded pill with amber glow box-shadow
- Section chevrons start subtle (25% opacity), reveal on hover
- Expand/collapse adds opacity fade alongside CSS grid height animation
- Chevron rotation uses spring-like cubic-bezier bounce easing
- Child items get gradient guide line and active dot indicator
- Press feedback via scale(0.98) on :active for all nav items
- Collapsed rail active state uses small amber left bar
- Footer divider uses gradient fade, version text fades on collapse
- Sidebar background uses subtle vertical gradient
- Right edge border gets amber-tinted gradient glow at center

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
master
2026-03-07 16:36:12 +02:00
parent 4e5d06c8ec
commit 79c13a5cff
2 changed files with 258 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/Web/StellaOps.Web/src/app/layout/app-sidebar/app-sidebar.component.ts
View File

@@ -105,6 +105,7 @@ interface NavSectionGroup {
[attr.aria-expanded]="!sidebarPrefs.collapsedGroups().has(group.id)"
[attr.aria-controls]="'nav-grp-' + group.id"
>
<span class="sb-group__dot"></span>
<span class="sb-group__title">{{ group.label }}</span>
<svg class="sb-group__chevron" viewBox="0 0 16 16" width="10" height="10" aria-hidden="true">
<path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -118,7 +119,7 @@ interface NavSectionGroup {
<div class="sb-divider"></div>
}
@if (!collapsed && section.displayChildren.length > 0) {
<!-- Section with foldable children -->
<!-- Section with foldable children: link + chevron toggle -->
<div class="sb-section" [class.sb-section--folded]="sidebarPrefs.collapsedSections().has(section.id)">
<div class="sb-section__head">
<app-sidebar-nav-item
@@ -130,17 +131,18 @@ interface NavSectionGroup {
></app-sidebar-nav-item>
<button
type="button"
class="sb-section__fold"
class="sb-section__chevron"
(click)="sidebarPrefs.toggleSection(section.id)"
[attr.aria-expanded]="!sidebarPrefs.collapsedSections().has(section.id)"
[attr.aria-controls]="'nav-sec-' + section.id"
[attr.aria-label]="(sidebarPrefs.collapsedSections().has(section.id) ? 'Expand ' : 'Collapse ') + section.label"
>
<svg class="sb-section__fold-icon" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
<path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<svg class="sb-section__chevron-icon" viewBox="0 0 16 16" width="10" height="10" aria-hidden="true">
<path d="M4 6l4 4.5 4-4.5z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="sb-section__body">
<div class="sb-section__body" [id]="'nav-sec-' + section.id">
<div class="sb-section__body-inner">
@for (child of section.displayChildren; track child.id) {
<app-sidebar-nav-item
@@ -204,11 +206,16 @@ interface NavSectionGroup {
width: 240px;
height: 100%;
min-height: 100vh;
background: var(--color-sidebar-bg);
background:
linear-gradient(
180deg,
var(--color-sidebar-bg) 0%,
color-mix(in srgb, var(--color-sidebar-bg) 96%, #000) 100%
);
color: var(--color-sidebar-text);
overflow: hidden;
position: relative;
transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar--collapsed {
@@ -222,10 +229,14 @@ interface NavSectionGroup {
right: 0;
bottom: 0;
width: 1px;
background: var(--color-sidebar-border);
background: linear-gradient(
180deg,
var(--color-sidebar-border) 0%,
rgba(245, 166, 35, 0.08) 50%,
var(--color-sidebar-border) 100%
);
}
/* Mobile: always full width regardless of collapsed state */
@media (max-width: 991px) {
.sidebar,
.sidebar.sidebar--collapsed {
@@ -244,11 +255,12 @@ interface NavSectionGroup {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
border-radius: 8px;
background: transparent;
color: var(--color-sidebar-text-muted);
cursor: pointer;
z-index: 5;
transition: background 0.15s, color 0.15s;
&:hover {
background: var(--color-sidebar-hover);
@@ -271,9 +283,9 @@ interface NavSectionGroup {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0.25rem 0.375rem;
padding: 0.5rem 0.5rem;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
&::-webkit-scrollbar {
width: 3px;
@@ -282,13 +294,17 @@ interface NavSectionGroup {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
&:hover {
background: rgba(255, 255, 255, 0.12);
}
}
}
.sidebar--collapsed .sidebar__nav {
padding: 0.25rem 0.125rem;
padding: 0.5rem 0.25rem;
}
/* ================================================================
@@ -296,45 +312,81 @@ interface NavSectionGroup {
================================================================ */
.sb-group {
&:not(:first-child) {
margin-top: 0.125rem;
padding-top: 0.25rem;
border-top: 1px solid var(--color-sidebar-divider);
margin-top: 0.5rem;
padding-top: 0.5rem;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0.75rem;
right: 0.75rem;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-sidebar-divider) 20%,
rgba(245, 166, 35, 0.06) 50%,
var(--color-sidebar-divider) 80%,
transparent 100%
);
}
}
}
/* ---- Group header (toggle button) ---- */
/* ---- Group header ---- */
.sb-group__header {
display: flex;
align-items: center;
width: calc(100% - 0.25rem);
margin: 0 0.125rem 0.125rem;
padding: 0.3125rem 0.5rem;
gap: 0.375rem;
width: 100%;
margin: 0 0 0.25rem;
padding: 0.375rem 0.625rem;
border: none;
border-radius: 4px;
border-radius: 6px;
background: transparent;
color: var(--color-sidebar-text-muted);
cursor: pointer;
font-family: inherit;
font-size: 0;
transition: color 0.15s, background 0.15s;
transition: color 0.2s, background 0.2s;
&:hover {
color: var(--color-sidebar-text-heading);
background: rgba(255, 255, 255, 0.03);
color: var(--color-sidebar-active-text);
background: rgba(245, 166, 35, 0.04);
}
&:focus-visible {
outline: 1px solid var(--color-sidebar-active-border);
outline-offset: -1px;
outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1.5px;
}
}
.sb-group__dot {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(245, 166, 35, 0.4);
transition: background 0.2s, transform 0.2s;
}
.sb-group__header:hover .sb-group__dot {
background: var(--color-sidebar-active-border);
transform: scale(1.3);
}
.sb-group--collapsed .sb-group__dot {
background: rgba(245, 166, 35, 0.2);
}
.sb-group__title {
flex: 1;
font-size: 0.5625rem;
font-weight: 700;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
line-height: 1;
text-align: left;
white-space: nowrap;
@@ -342,12 +394,12 @@ interface NavSectionGroup {
text-overflow: ellipsis;
}
/* ---- Group chevron (rotates on collapse) ---- */
/* ---- Group chevron ---- */
.sb-group__chevron {
flex-shrink: 0;
opacity: 0.35;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s;
opacity: 0.3;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s;
}
.sb-group--collapsed .sb-group__chevron {
@@ -358,11 +410,11 @@ interface NavSectionGroup {
opacity: 0.7;
}
/* ---- Animated group body (CSS grid trick) ---- */
/* ---- Animated group body ---- */
.sb-group__body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-group--collapsed .sb-group__body {
@@ -371,63 +423,78 @@ interface NavSectionGroup {
.sb-group__body-inner {
overflow: hidden;
transition: opacity 0.28s ease;
}
.sb-group--collapsed .sb-group__body-inner {
opacity: 0;
}
/* ================================================================
Sections within a group (foldable children)
Sections within a group
================================================================ */
.sb-divider {
height: 1px;
background: var(--color-sidebar-divider);
margin: 0.25rem 0.75rem;
height: 0;
margin: 0.25rem 0;
}
/* Section head: nav-item + fold toggle */
/* Section head: nav-item + chevron */
.sb-section__head {
position: relative;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.sb-section__fold {
position: absolute;
right: 0.375rem;
top: 50%;
transform: translateY(-50%);
.sb-section__head > app-sidebar-nav-item {
flex: 1;
min-width: 0;
}
.sb-section__chevron {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
width: 20px;
height: 20px;
border: none;
border-radius: 4px;
border-radius: 5px;
background: transparent;
color: var(--color-sidebar-text-muted);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s;
z-index: 2;
opacity: 0.25;
transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.15s;
margin-right: 0.25rem;
&:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-sidebar-text-heading);
opacity: 1 !important;
background: rgba(245, 166, 35, 0.12);
color: var(--color-sidebar-active-text);
transform: scale(1.1);
}
&:focus-visible {
opacity: 1;
outline: 1px solid var(--color-sidebar-active-border);
opacity: 1 !important;
outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1.5px;
}
}
/* Show fold button on hover or when section is folded */
.sb-section__head:hover .sb-section__fold,
.sb-section--folded .sb-section__fold {
opacity: 1;
.sb-section__head:hover .sb-section__chevron {
opacity: 0.7;
}
.sb-section__fold-icon {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
.sb-section--folded .sb-section__chevron {
opacity: 0.45;
}
.sb-section--folded .sb-section__fold-icon {
.sb-section__chevron-icon {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sb-section--folded .sb-section__chevron-icon {
transform: rotate(-90deg);
}
@@ -435,7 +502,7 @@ interface NavSectionGroup {
.sb-section__body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-section--folded .sb-section__body {
@@ -444,16 +511,37 @@ interface NavSectionGroup {
.sb-section__body-inner {
overflow: hidden;
margin-left: 1.25rem;
border-left: 1px solid rgba(245, 166, 35, 0.12);
margin-left: 1.375rem;
padding-left: 0.375rem;
position: relative;
transition: opacity 0.24s ease;
&::before {
content: '';
position: absolute;
left: 0;
top: 0.125rem;
bottom: 0.125rem;
width: 1px;
background: linear-gradient(
180deg,
rgba(245, 166, 35, 0.2) 0%,
rgba(245, 166, 35, 0.08) 100%
);
border-radius: 1px;
}
}
.sb-section--folded .sb-section__body-inner {
opacity: 0;
}
/* ================================================================
Footer with collapse toggle
Footer
================================================================ */
.sidebar__footer {
flex-shrink: 0;
padding: 0.375rem 0.75rem 0.5rem;
padding: 0.5rem 0.625rem 0.625rem;
}
.sidebar__collapse-btn {
@@ -461,28 +549,27 @@ interface NavSectionGroup {
align-items: center;
justify-content: center;
width: 100%;
height: 28px;
border: 1px solid var(--color-sidebar-divider);
border-radius: 6px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
background: transparent;
color: var(--color-sidebar-text-muted);
cursor: pointer;
margin-bottom: 0.375rem;
transition: color 0.15s, background 0.15s, border-color 0.15s;
margin-bottom: 0.5rem;
transition: color 0.2s, background 0.2s, border-color 0.2s;
&:hover {
color: var(--color-sidebar-text-heading);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
color: var(--color-sidebar-active-text);
background: rgba(245, 166, 35, 0.06);
border-color: rgba(245, 166, 35, 0.15);
}
&:focus-visible {
outline: 1px solid var(--color-sidebar-active-border);
outline-offset: -1px;
outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1.5px;
}
}
/* Hide collapse button on mobile (mobile uses the close X) */
@media (max-width: 991px) {
.sidebar__collapse-btn {
display: none;
@@ -491,8 +578,14 @@ interface NavSectionGroup {
.sidebar__footer-divider {
height: 1px;
background: var(--color-sidebar-divider);
margin-bottom: 0.375rem;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-sidebar-divider) 30%,
var(--color-sidebar-divider) 70%,
transparent 100%
);
margin-bottom: 0.5rem;
}
.sidebar__version {
@@ -504,6 +597,7 @@ interface NavSectionGroup {
color: var(--color-sidebar-version);
text-align: center;
white-space: nowrap;
transition: font-size 0.2s, opacity 0.2s;
}
.sidebar--collapsed .sidebar__footer {
@@ -512,6 +606,7 @@ interface NavSectionGroup {
.sidebar--collapsed .sidebar__version {
font-size: 0;
opacity: 0;
overflow: hidden;
}
`],

102
src/Web/StellaOps.Web/src/app/layout/app-sidebar/sidebar-nav-item.component.ts
View File

@@ -282,26 +282,35 @@ export interface NavItem {
align-items: center;
gap: 0.625rem;
padding: 0.4375rem 0.75rem;
margin: 0 0.25rem 1px;
margin: 1px 0.125rem;
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 450;
transition: all 0.12s;
border-radius: 6px;
transition:
background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
cursor: pointer;
position: relative;
min-width: 0;
border-left: 2px solid transparent;
&:hover {
background: var(--color-sidebar-hover);
background: rgba(245, 166, 35, 0.08);
color: var(--color-sidebar-text-heading);
}
&:active {
transform: scale(0.98);
}
&:focus-visible {
outline: 2px solid var(--color-sidebar-active-border);
outline-offset: -2px;
outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1.5px;
}
}
@@ -310,39 +319,75 @@ export interface NavItem {
color: var(--color-sidebar-active-text);
font-weight: 600;
border-left-color: var(--color-sidebar-active-border);
box-shadow:
0 0 0 1px rgba(245, 166, 35, 0.08),
0 1px 6px rgba(245, 166, 35, 0.06);
.nav-item__icon {
color: var(--color-sidebar-active-text);
opacity: 1;
}
&:hover {
background: var(--color-sidebar-active-bg);
box-shadow:
0 0 0 1px rgba(245, 166, 35, 0.12),
0 2px 10px rgba(245, 166, 35, 0.08);
}
}
.nav-item--child {
font-size: 0.8125rem;
border-radius: 0;
margin: 0 0.25rem 1px;
padding: 0.375rem 0.75rem;
font-size: 0.7875rem;
font-weight: 420;
border-radius: 6px;
margin: 1px 0.125rem;
padding: 0.3125rem 0.625rem;
border-left: 2px solid transparent;
.nav-item__icon {
width: 16px;
height: 16px;
width: 15px;
height: 15px;
opacity: 0.45;
svg {
width: 14px;
height: 14px;
width: 13px;
height: 13px;
}
}
}
.nav-item--child:hover {
background: rgba(245, 166, 35, 0.06);
.nav-item__icon {
opacity: 0.7;
}
}
.nav-item--child.nav-item--active {
background: transparent;
background: rgba(245, 166, 35, 0.1);
color: var(--color-sidebar-active-text);
font-weight: 600;
border-left-color: transparent;
box-shadow: none;
.nav-item__icon {
opacity: 1;
color: var(--color-sidebar-active-text);
}
&::before {
content: '';
position: absolute;
left: -0.625rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-sidebar-active-border);
box-shadow: 0 0 6px rgba(245, 166, 35, 0.3);
}
}
.nav-item__icon {
@@ -352,11 +397,12 @@ export interface NavItem {
justify-content: center;
width: 18px;
height: 18px;
opacity: 0.65;
opacity: 0.55;
transition: opacity 0.18s, color 0.18s;
}
.nav-item:hover .nav-item__icon {
opacity: 0.9;
opacity: 0.85;
}
.nav-item--active .nav-item__icon {
@@ -384,23 +430,39 @@ export interface NavItem {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(245, 166, 35, 0.2);
}
/* Collapsed: icon-only mode */
.nav-item--icon-only {
justify-content: center;
padding: 0.5rem;
margin: 0 0.125rem 1px;
margin: 1px 0.125rem;
border-left-color: transparent;
border-radius: 8px;
.nav-item__icon {
opacity: 0.8;
opacity: 0.7;
}
&:hover .nav-item__icon {
opacity: 1;
}
}
.nav-item--icon-only.nav-item--active {
border-left-color: transparent;
border-radius: 6px;
&::after {
content: '';
position: absolute;
left: -1px;
top: 25%;
bottom: 25%;
width: 2px;
border-radius: 2px;
background: var(--color-sidebar-active-border);
}
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,