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-expanded]="!sidebarPrefs.collapsedGroups().has(group.id)"
[attr.aria-controls]="'nav-grp-' + group.id" [attr.aria-controls]="'nav-grp-' + group.id"
> >
<span class="sb-group__dot"></span>
<span class="sb-group__title">{{ group.label }}</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"> <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"/> <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> <div class="sb-divider"></div>
} }
@if (!collapsed && section.displayChildren.length > 0) { @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" [class.sb-section--folded]="sidebarPrefs.collapsedSections().has(section.id)">
<div class="sb-section__head"> <div class="sb-section__head">
<app-sidebar-nav-item <app-sidebar-nav-item
@@ -130,17 +131,18 @@ interface NavSectionGroup {
></app-sidebar-nav-item> ></app-sidebar-nav-item>
<button <button
type="button" type="button"
class="sb-section__fold" class="sb-section__chevron"
(click)="sidebarPrefs.toggleSection(section.id)" (click)="sidebarPrefs.toggleSection(section.id)"
[attr.aria-expanded]="!sidebarPrefs.collapsedSections().has(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" [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"> <svg class="sb-section__chevron-icon" 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"/> <path d="M4 6l4 4.5 4-4.5z" fill="currentColor"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="sb-section__body"> <div class="sb-section__body" [id]="'nav-sec-' + section.id">
<div class="sb-section__body-inner"> <div class="sb-section__body-inner">
@for (child of section.displayChildren; track child.id) { @for (child of section.displayChildren; track child.id) {
<app-sidebar-nav-item <app-sidebar-nav-item
@@ -204,11 +206,16 @@ interface NavSectionGroup {
width: 240px; width: 240px;
height: 100%; height: 100%;
min-height: 100vh; 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); color: var(--color-sidebar-text);
overflow: hidden; overflow: hidden;
position: relative; 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 { .sidebar--collapsed {
@@ -222,10 +229,14 @@ interface NavSectionGroup {
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 1px; 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) { @media (max-width: 991px) {
.sidebar, .sidebar,
.sidebar.sidebar--collapsed { .sidebar.sidebar--collapsed {
@@ -244,11 +255,12 @@ interface NavSectionGroup {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--color-sidebar-text-muted); color: var(--color-sidebar-text-muted);
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
transition: background 0.15s, color 0.15s;
&:hover { &:hover {
background: var(--color-sidebar-hover); background: var(--color-sidebar-hover);
@@ -271,9 +283,9 @@ interface NavSectionGroup {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 0.25rem 0.375rem; padding: 0.5rem 0.5rem;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent; scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 3px; width: 3px;
@@ -282,13 +294,17 @@ interface NavSectionGroup {
background: transparent; background: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06);
border-radius: 3px; border-radius: 3px;
&:hover {
background: rgba(255, 255, 255, 0.12);
}
} }
} }
.sidebar--collapsed .sidebar__nav { .sidebar--collapsed .sidebar__nav {
padding: 0.25rem 0.125rem; padding: 0.5rem 0.25rem;
} }
/* ================================================================ /* ================================================================
@@ -296,45 +312,81 @@ interface NavSectionGroup {
================================================================ */ ================================================================ */
.sb-group { .sb-group {
&:not(:first-child) { &:not(:first-child) {
margin-top: 0.125rem; margin-top: 0.5rem;
padding-top: 0.25rem; padding-top: 0.5rem;
border-top: 1px solid var(--color-sidebar-divider); 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 { .sb-group__header {
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(100% - 0.25rem); gap: 0.375rem;
margin: 0 0.125rem 0.125rem; width: 100%;
padding: 0.3125rem 0.5rem; margin: 0 0 0.25rem;
padding: 0.375rem 0.625rem;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
background: transparent; background: transparent;
color: var(--color-sidebar-text-muted); color: var(--color-sidebar-text-muted);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
font-size: 0; font-size: 0;
transition: color 0.15s, background 0.15s; transition: color 0.2s, background 0.2s;
&:hover { &:hover {
color: var(--color-sidebar-text-heading); color: var(--color-sidebar-active-text);
background: rgba(255, 255, 255, 0.03); background: rgba(245, 166, 35, 0.04);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-sidebar-active-border); outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1px; 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 { .sb-group__title {
flex: 1; flex: 1;
font-size: 0.5625rem; font-size: 0.625rem;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.08em;
line-height: 1; line-height: 1;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
@@ -342,12 +394,12 @@ interface NavSectionGroup {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* ---- Group chevron (rotates on collapse) ---- */ /* ---- Group chevron ---- */
.sb-group__chevron { .sb-group__chevron {
flex-shrink: 0; flex-shrink: 0;
opacity: 0.35; opacity: 0.3;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.15s; opacity 0.2s;
} }
.sb-group--collapsed .sb-group__chevron { .sb-group--collapsed .sb-group__chevron {
@@ -358,11 +410,11 @@ interface NavSectionGroup {
opacity: 0.7; opacity: 0.7;
} }
/* ---- Animated group body (CSS grid trick) ---- */ /* ---- Animated group body ---- */
.sb-group__body { .sb-group__body {
display: grid; display: grid;
grid-template-rows: 1fr; 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 { .sb-group--collapsed .sb-group__body {
@@ -371,63 +423,78 @@ interface NavSectionGroup {
.sb-group__body-inner { .sb-group__body-inner {
overflow: hidden; 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 { .sb-divider {
height: 1px; height: 0;
background: var(--color-sidebar-divider); margin: 0.25rem 0;
margin: 0.25rem 0.75rem;
} }
/* Section head: nav-item + fold toggle */ /* Section head: nav-item + chevron */
.sb-section__head { .sb-section__head {
position: relative; position: relative;
display: flex;
align-items: center;
margin: 0;
padding: 0;
} }
.sb-section__fold { .sb-section__head > app-sidebar-nav-item {
position: absolute; flex: 1;
right: 0.375rem; min-width: 0;
top: 50%; }
transform: translateY(-50%);
.sb-section__chevron {
flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 22px; width: 20px;
height: 22px; height: 20px;
border: none; border: none;
border-radius: 4px; border-radius: 5px;
background: transparent; background: transparent;
color: var(--color-sidebar-text-muted); color: var(--color-sidebar-text-muted);
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0.25;
transition: opacity 0.15s, background 0.15s, color 0.15s; transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.15s;
z-index: 2; margin-right: 0.25rem;
&:hover { &:hover {
background: rgba(255, 255, 255, 0.06); opacity: 1 !important;
color: var(--color-sidebar-text-heading); background: rgba(245, 166, 35, 0.12);
color: var(--color-sidebar-active-text);
transform: scale(1.1);
} }
&:focus-visible { &:focus-visible {
opacity: 1; opacity: 1 !important;
outline: 1px solid var(--color-sidebar-active-border); 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__chevron {
.sb-section__head:hover .sb-section__fold, opacity: 0.7;
.sb-section--folded .sb-section__fold {
opacity: 1;
} }
.sb-section__fold-icon { .sb-section--folded .sb-section__chevron {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 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); transform: rotate(-90deg);
} }
@@ -435,7 +502,7 @@ interface NavSectionGroup {
.sb-section__body { .sb-section__body {
display: grid; display: grid;
grid-template-rows: 1fr; 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 { .sb-section--folded .sb-section__body {
@@ -444,16 +511,37 @@ interface NavSectionGroup {
.sb-section__body-inner { .sb-section__body-inner {
overflow: hidden; overflow: hidden;
margin-left: 1.25rem; margin-left: 1.375rem;
border-left: 1px solid rgba(245, 166, 35, 0.12); 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 { .sidebar__footer {
flex-shrink: 0; flex-shrink: 0;
padding: 0.375rem 0.75rem 0.5rem; padding: 0.5rem 0.625rem 0.625rem;
} }
.sidebar__collapse-btn { .sidebar__collapse-btn {
@@ -461,28 +549,27 @@ interface NavSectionGroup {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 28px; height: 30px;
border: 1px solid var(--color-sidebar-divider); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--color-sidebar-text-muted); color: var(--color-sidebar-text-muted);
cursor: pointer; cursor: pointer;
margin-bottom: 0.375rem; margin-bottom: 0.5rem;
transition: color 0.15s, background 0.15s, border-color 0.15s; transition: color 0.2s, background 0.2s, border-color 0.2s;
&:hover { &:hover {
color: var(--color-sidebar-text-heading); color: var(--color-sidebar-active-text);
background: rgba(255, 255, 255, 0.04); background: rgba(245, 166, 35, 0.06);
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(245, 166, 35, 0.15);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-sidebar-active-border); outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -1px; outline-offset: -1.5px;
} }
} }
/* Hide collapse button on mobile (mobile uses the close X) */
@media (max-width: 991px) { @media (max-width: 991px) {
.sidebar__collapse-btn { .sidebar__collapse-btn {
display: none; display: none;
@@ -491,8 +578,14 @@ interface NavSectionGroup {
.sidebar__footer-divider { .sidebar__footer-divider {
height: 1px; height: 1px;
background: var(--color-sidebar-divider); background: linear-gradient(
margin-bottom: 0.375rem; 90deg,
transparent 0%,
var(--color-sidebar-divider) 30%,
var(--color-sidebar-divider) 70%,
transparent 100%
);
margin-bottom: 0.5rem;
} }
.sidebar__version { .sidebar__version {
@@ -504,6 +597,7 @@ interface NavSectionGroup {
color: var(--color-sidebar-version); color: var(--color-sidebar-version);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
transition: font-size 0.2s, opacity 0.2s;
} }
.sidebar--collapsed .sidebar__footer { .sidebar--collapsed .sidebar__footer {
@@ -512,6 +606,7 @@ interface NavSectionGroup {
.sidebar--collapsed .sidebar__version { .sidebar--collapsed .sidebar__version {
font-size: 0; font-size: 0;
opacity: 0;
overflow: hidden; 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; align-items: center;
gap: 0.625rem; gap: 0.625rem;
padding: 0.4375rem 0.75rem; padding: 0.4375rem 0.75rem;
margin: 0 0.25rem 1px; margin: 1px 0.125rem;
color: var(--color-sidebar-text); color: var(--color-sidebar-text);
text-decoration: none; text-decoration: none;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 450; font-weight: 450;
transition: all 0.12s; transition:
border-radius: 6px; 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; cursor: pointer;
position: relative; position: relative;
min-width: 0; min-width: 0;
border-left: 2px solid transparent; border-left: 2px solid transparent;
&:hover { &:hover {
background: var(--color-sidebar-hover); background: rgba(245, 166, 35, 0.08);
color: var(--color-sidebar-text-heading); color: var(--color-sidebar-text-heading);
} }
&:active {
transform: scale(0.98);
}
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-sidebar-active-border); outline: 1.5px solid var(--color-sidebar-active-border);
outline-offset: -2px; outline-offset: -1.5px;
} }
} }
@@ -310,39 +319,75 @@ export interface NavItem {
color: var(--color-sidebar-active-text); color: var(--color-sidebar-active-text);
font-weight: 600; font-weight: 600;
border-left-color: var(--color-sidebar-active-border); 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 { .nav-item__icon {
color: var(--color-sidebar-active-text); color: var(--color-sidebar-active-text);
opacity: 1;
} }
&:hover { &:hover {
background: var(--color-sidebar-active-bg); 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 { .nav-item--child {
font-size: 0.8125rem; font-size: 0.7875rem;
border-radius: 0; font-weight: 420;
margin: 0 0.25rem 1px; border-radius: 6px;
padding: 0.375rem 0.75rem; margin: 1px 0.125rem;
padding: 0.3125rem 0.625rem;
border-left: 2px solid transparent; border-left: 2px solid transparent;
.nav-item__icon { .nav-item__icon {
width: 16px; width: 15px;
height: 16px; height: 15px;
opacity: 0.45;
svg { svg {
width: 14px; width: 13px;
height: 14px; 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 { .nav-item--child.nav-item--active {
background: transparent; background: rgba(245, 166, 35, 0.1);
color: var(--color-sidebar-active-text); color: var(--color-sidebar-active-text);
font-weight: 600; font-weight: 600;
border-left-color: transparent; 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 { .nav-item__icon {
@@ -352,11 +397,12 @@ export interface NavItem {
justify-content: center; justify-content: center;
width: 18px; width: 18px;
height: 18px; height: 18px;
opacity: 0.65; opacity: 0.55;
transition: opacity 0.18s, color 0.18s;
} }
.nav-item:hover .nav-item__icon { .nav-item:hover .nav-item__icon {
opacity: 0.9; opacity: 0.85;
} }
.nav-item--active .nav-item__icon { .nav-item--active .nav-item__icon {
@@ -384,23 +430,39 @@ export interface NavItem {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 1px 4px rgba(245, 166, 35, 0.2);
} }
/* Collapsed: icon-only mode */ /* Collapsed: icon-only mode */
.nav-item--icon-only { .nav-item--icon-only {
justify-content: center; justify-content: center;
padding: 0.5rem; padding: 0.5rem;
margin: 0 0.125rem 1px; margin: 1px 0.125rem;
border-left-color: transparent; border-left-color: transparent;
border-radius: 8px;
.nav-item__icon { .nav-item__icon {
opacity: 0.8; opacity: 0.7;
}
&:hover .nav-item__icon {
opacity: 1;
} }
} }
.nav-item--icon-only.nav-item--active { .nav-item--icon-only.nav-item--active {
border-left-color: transparent; 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, changeDetection: ChangeDetectionStrategy.OnPush,