[DPEDE-7039] Optimize SCSS for Sidenav component

[mattnickles]

https://lumen.atlassian.net/browse/DPEDE-7039

Summary

Optimized sidenav.scss to reduce compiled CSS output by −6,562 B per theme (lumen). Source lines reduced from 1,160 to 864 (536 main + 328 partial; −296 net). 133 duplicate theme variable lines consolidated. Longest compiled selector reduced from 837 to 220 characters. Primary techniques: nesting flattening (selector text reduction), CSS custom property consolidation (--sidenav-w), and @mixin deduplication. Additionally fixed 4 bugs discovered during review and standardized font-weight behavior across legacy and accordion drawer variants.

Background

sidenav.scss was the 7th heaviest component in Chi at 27.5 KB compiled / 171 rule blocks (lumen), representing 4.0% of total CSS output. The primary optimization opportunities were:

• Deep nesting in .-global — SCSS following DOM structure literally, producing the longest selector in the design system (837 chars / 40 combinators) for a single color rule.
• Duplicate drawer positioning — 5 identical .chi-drawer.-left { left: $width } blocks across size variants and responsive breakpoints.
• Repeated active-state declarations — 4× identical 4-property blocks (background-color, box-shadow, color, font-weight) across drawer accordion contexts.
• 19 identical theme variables × 7 themes — 133 declarations that could be consolidated with !default.
• Unused code — commented-out .-sliding modifier, unreferenced &__description.

---

Changes Made

1. Deep nesting flattening in .-global

Removed the .chi-sidenav__content nav .chi-sidenav__list > li prefix from ~40 compiled rules in the global variant. The .-global modifier provides sufficient specificity without intermediate DOM-path selectors. Extracted the entire .-global section into _sidenav-global.scss partial (330 lines).

Before: .chi-sidenav.-global .chi-sidenav__content nav .chi-sidenav__list > li .chi-sidenav__item-wrapper ... (837 chars)
After: .chi-sidenav.-global .chi-sidenav__item-wrapper ... (220 chars max)

2. CSS custom property --sidenav-w for drawer positioning

Replaced 5 duplicate .chi-drawer.-left blocks (base, responsive md, -sm, -md, -lg) with a single var(--sidenav-w) declaration. Each size variant sets the custom property as a one-liner instead of duplicating 6 lines of drawer positioning.

3. Active/hover state deduplication

Created @mixin _sidenav-drawer-active-state for the 4× repeated active-state block in drawer content. Flattened drawer content nesting and consolidated expand/collapse visibility patterns at the base .-global level.

4. Selector compression via :is()

• :is(.chi-link, .icon-chevron-down) combines visibility toggle selectors

5. Unused code cleanup

Block	Reason
Commented-out .-sliding modifier	No longer in use
.-float modifier on sidenav root	No current references in workspace. Confirmed with Jose - safe to remove.
.-sm, .-md, .-lg size modifiers on sidenav root	No current references in workspace. Confirmed with Jose - safe to remove. Sizing handled by --sidenav-w custom property (§2)
TODO comments (×8)	Resolved — Connect theme released
&__description block	No current references in workspace

6. Theme variable !default consolidation

19 variables identical across all 7 themes moved to sidenav.scss with !default. Consolidated 133 duplicate lines from theme _variables.scss files.

7. CSS shorthand, logical properties & source architecture

margin-block: 0, padding/margin/border-radius shorthand conversions. Added section headers for navigation. Extracted .-global into partial file.

8. Bug fixes discovered during review

8a. Drawer z-index stacking

Drawer panel was rendering on top of __content during slide animation. Root cause: __content had z-index: $zindex-fixed + 1 (21) which tied with .-active drawer (also 21), and DOM order caused the drawer to win. Fixed by bumping __content to $zindex-fixed + 2 (22).

8b. Global sidenav specificity regression

Accordion trigger icons in the global sidenav rendered teal instead of grey. The nesting flattening in §1 dropped .chi-sidenav__content nav from the .chi-sidenav__list > li selector chain, reducing specificity from (0,6,2) to (0,5,1) — which lost to the accordion component's .chi-accordion.-link .chi-accordion__trigger .chi-icon at (0,6,0). Fixed by restoring .chi-sidenav__content nav nesting for the list-items block only.

8c. Legacy icon sizing for material icons

Drawer close button icon, accordion trigger chevron, and chi-sidenav__title::after pseudo-icon were sized at 0.75rem — appropriate for the old custom icon font but too small for Material Symbols Outlined. Updated all icon sizing properties (font-size, height, width, line-height) to 1.25rem and adjusted absolute positioning (top, right) for vertical centering.

8d. Missing text-decoration: none on drawer content anchors

Pre-existing issue: a.chi-drawer__subitem-list-trigger links were underlined because the remove-anchor-style mixin only sets text-decoration: none on :hover. Added text-decoration: none to the .chi-drawer__content a base rule.

9. Global sidenav visual regression tests

Added global sidenav test sections (collapsed + expanded) to tests/js/sidenav.pug.

10. Font-weight standardization across drawer variants (intentional visual change)

This is an intentional design alignment, not a regression. The accordion drawer variant applied font-weight: 500 to ALL top-level items unconditionally (both active and inactive). The legacy drawer variant only applied font-weight: 500 conditionally on -active and -expanded states. No documentation examples use the legacy pattern — all sidenav docs reference the accordion variant.

Standardized legacy __drawer-list to match: all top-level items now render at font-weight: 500, unifying behavior across both variants and simplifying the code.

Results

Source Metrics

Metric	Before	After	Delta
sidenav.scss source lines	1,160	864 (536 + 328 partial)	−296 (−25.5%)
Redundant theme variable lines (7 files)	133	0	−133
Total SCSS lines removed	—	—	−429
Compiled rules (lumen)	171	~161	~−10
Longest compiled selector	837 chars	220 chars	−74%

Compiled CSS Size

Theme	Before	After	Saved	%
lumen	679,364 B	672,802 B	−6,562 B	0.97%
centurylink	679,936 B	673,393 B	−6,543 B	0.96%
connect	684,854 B	678,292 B	−6,562 B	0.96%
colt	678,476 B	671,966 B	−6,510 B	0.96%
brightspeed	676,077 B	669,545 B	−6,532 B	0.97%
portal	680,335 B	673,764 B	−6,571 B	0.97%

Sidenav-Specific CSS (lumen)

Metric	Before	After	Delta
Sidenav CSS bytes	27,346 B	~20,784 B	−6,562 B (−24.0%)

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2080/1/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2080-ux-chi.rke-odc-test.corp.intranet (internal)

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2080/2/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2080-ux-chi.rke-odc-test.corp.intranet (internal)

[lumn-sonarent]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2080/3/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2080-ux-chi.rke-odc-test.corp.intranet (internal)