Skip to content
This repository was archived by the owner on Apr 13, 2026. It is now read-only.

chore: Fix sidebar behavior and cleanup CSS rules#781

Merged
morri-son merged 10 commits into
open-component-model:mainfrom
morri-son:back-to-default-sidebar
Mar 24, 2026
Merged

chore: Fix sidebar behavior and cleanup CSS rules#781
morri-son merged 10 commits into
open-component-model:mainfrom
morri-son:back-to-default-sidebar

Conversation

@morri-son

@morri-son morri-son commented Mar 23, 2026

Copy link
Copy Markdown
Contributor

What this PR does / why we need it

Improve design of website and and clean up CSS rules

  • Fix sidebar scrollbar
  • Fix left margin of sidebar
  • Fix color and style of section headers in sidebar
  • Enable click on section header navigates to overview section
  • Clean up CSS rules: remove duplicates, remove !important where possible, remove hard-coded values and replace by variables, centralize variables in single file

Summary by CodeRabbit

  • New Features

    • Enhanced sidebar navigation with improved interactive behavior for section links.
  • Style

    • Refactored color system to use CSS custom properties for consistent theming across the site.
    • Optimized spacing and padding for improved visual hierarchy in documentation layouts.
  • Chores

    • Getting Started section now defaults to collapsed state.

On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
@morri-son morri-son added the kind/chore chore, maintenance, etc. label Mar 23, 2026
@netlify

netlify Bot commented Mar 23, 2026

Copy link
Copy Markdown

Deploy Preview for open-component-model ready!

Name Link
🔨 Latest commit 6914989
🔍 Latest deploy log https://app.netlify.com/projects/open-component-model/deploys/69c25d82a98cf0000790b288
😎 Deploy Preview https://deploy-preview-781--open-component-model.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Mar 23, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c12cd135-7979-40b6-b176-f8040cd8c40b

📥 Commits

Reviewing files that changed from the base of the PR and between 0da708c and 6914989.

📒 Files selected for processing (5)
  • assets/js/custom.js
  • assets/scss/common/_components.scss
  • assets/scss/common/_pages.scss
  • assets/scss/common/_variables-custom.scss
  • layouts/_partials/sidebar/render-section-menu.html
🚧 Files skipped from review as they are similar to previous changes (2)
  • assets/js/custom.js
  • assets/scss/common/_variables-custom.scss

📝 Walkthrough

Walkthrough

This pull request refactors the theme architecture by centralizing CSS custom properties, updates sidebar interaction logic with a new click handler and Hugo partial template, and simplifies component styling across multiple SCSS files to reference the new centralized variables instead of hard-coded colors.

Changes

Cohort / File(s) Summary
Sidebar Interaction & Rendering
assets/js/custom.js, layouts/_partials/sidebar/render-section-menu.html
Implemented a document-level click handler that intercepts sidebar section link clicks, preventing default navigation for same-page links and toggling <details> open state. Added new Hugo partial template that renders sidebar section menu as nested list with <details>/<summary> structure, computing active state via aria-current attributes and conditionally opening sections based on page state and sidebar.collapsed parameter.
Centralized Theme Variables
assets/scss/common/_variables-custom.scss
Introduced comprehensive CSS custom property system defining navigation sizing/typography, card system styling (backgrounds, borders, colors, shadows), sidebar active/hover states, TOC and description box themes, version warning banner colors, and branding/logo colors with light/dark variants. Added explicit light-mode overrides for sidebar colors.
Component Styling Refactoring
assets/scss/common/_branding.scss, assets/scss/common/_version-warning.scss, assets/scss/common/_components.scss, assets/scss/common/_cards.scss
Replaced hard-coded hex color values with corresponding CSS custom properties across branding logos, version warning banner, TOC box, and card components. Removed inline :root custom property definitions in favor of centralized variables, maintaining same visual structure.
Layout & Spacing Refinement
assets/scss/common/_pages.scss, assets/scss/common/_header-custom.scss, assets/scss/common/_sidebar.scss, assets/scss/common/_base.scss
Added page-scoped styling for table cells, lists, and headings with adjusted vertical rhythm. Introduced navbar-control-reset mixin to consolidate repeated navbar utility styling. Refactored sidebar .section-nav with simplified active/hover state handling. Removed external Inter font import and updated full-width spacing from 0rem to 0. Removed !important qualifiers from section title alignment.
Documentation Configuration
content/docs/getting-started/_index.md
Updated "Getting Started" page to render with collapsed sidebar state by default.

Sequence Diagram

sequenceDiagram
    actor User
    participant Browser
    participant ClickHandler as JS Click Handler
    participant DOMState as DOM/Details Element
    participant Navigator as window.location

    User->>Browser: Click sidebar section link
    activate ClickHandler
    Browser->>ClickHandler: Capture phase event
    ClickHandler->>ClickHandler: Check if modified/middle click
    ClickHandler->>ClickHandler: Check link target & download attr
    alt Same page link (aria-current="page")
        ClickHandler->>ClickHandler: Prevent default
        ClickHandler->>DOMState: Toggle closest details.open
        DOMState->>Browser: Update DOM
    else Different page link
        ClickHandler->>ClickHandler: Prevent default & summary toggle
        ClickHandler->>Navigator: Set window.location.href
        Navigator->>Browser: Navigate to new page
    end
    deactivate ClickHandler
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

area/documentation

Suggested reviewers

  • matthiasbruns
  • piotrjanik
  • frewilhelm

Poem

🐰 With whiskers twitching at the sight,
A theme system shiny, centralized and right!
Variables dancing in CSS arrays,
The sidebar clicks flow in mystical ways.
Colors harmonized, the layout's delight! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main changes: fixing sidebar behavior and cleaning up CSS rules, which matches the core work across multiple SCSS files and the sidebar template.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
@morri-son morri-son marked this pull request as ready for review March 23, 2026 20:22
@morri-son morri-son requested a review from a team as a code owner March 23, 2026 20:22
@morri-son morri-son changed the title Back to default sidebar chore: Fix sidebar behavior and cleanup CSS rules Mar 23, 2026
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
@morri-son morri-son enabled auto-merge (squash) March 23, 2026 20:28

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
assets/scss/common/_header-custom.scss (1)

198-204: ⚠️ Potential issue | 🟡 Minor

Stylelint failure at Line 203 (declaration-empty-line-before).

Add the required blank line after the mixin include to keep lint/pipeline green.

✅ Minimal lint fix
     .mode-toggle {
         `@include` navbar-control-reset;
+
         height: 32px !important;
     }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@assets/scss/common/_header-custom.scss` around lines 198 - 204, The rule
block for selectors .btn-link, .nav-link, .header-github-pill, .mode-toggle uses
the mixin `@include` navbar-control-reset; but violates stylelint
declaration-empty-line-before — add a single blank line after the mixin include
inside that rule so there is an empty line between the include and the following
height declaration (i.e., ensure `@include` navbar-control-reset; is followed by
one blank line, then height: 32px !important;).
🧹 Nitpick comments (1)
config/_default/module.toml (1)

129-129: Update the nearby versioning note to match the pinned import.

Line 129 pins the module to v0.2.0, but the comment block above still says “dev: uses latest”, which is now misleading.

✏️ Suggested doc-note update
-### dev: uses latest
+### latest: uses the pinned ref docs module version configured below
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@config/_default/module.toml` at line 129, The comment above the module pin is
out of date: the toml now contains version = "v0.2.0" but the doc note still
says “dev: uses latest”; update that nearby comment block to state that the
module is pinned to v0.2.0 (or otherwise reflect the pinned import) so the
documentation matches the actual version string (search for version = "v0.2.0"
and edit the surrounding comment text).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@assets/js/custom.js`:
- Around line 10-39: Add a guard to only hijack plain left-clicks: inside the
document.addEventListener('click', (e) => { handler, after you compute const
link = ... and confirm link exists, early-return if the click is not a simple
left-click by checking e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey ||
e.altKey (also consider returning if link.target === '_blank'), so modified
clicks or clicks meant to open in new tab/window are left to the browser; leave
the rest of the logic (using details, preventDefault, stopImmediatePropagation,
and programmatic navigation via window.location.href) unchanged.

In `@assets/scss/common/_components.scss`:
- Around line 42-58: Remove the empty lines inside the .section-desc-box rule
that are triggering stylelint's declaration-empty-line-before (specifically
remove the blank line before the font-size declaration and the blank line before
the width declaration), keeping all declarations consecutively grouped; edit the
.section-desc-box block in assets/scss/common/_components.scss (the selector
.section-desc-box) to eliminate those extra blank lines so the rule has no empty
lines between declarations.
- Around line 62-65: Define a new CSS custom property --desc-box-border-dark in
_variables-custom.scss alongside the other desc-box tokens (matching the dark
visual spec), then update the dark-mode override for the .section-desc-box
selector to include border: var(--desc-box-border-dark); (you can reference the
existing .toc-box dark-mode behavior for the exact placement and pattern).

In `@assets/scss/common/_pages.scss`:
- Around line 31-35: Replace selectors that rely on :first-child (e.g.,
.docs-content h1:first-child and the similar selectors around lines 51-54) with
type-based pseudo-class matching so the first heading is targeted even when
breadcrumbs or banners precede it; specifically, change the selector usage to
use :first-of-type for h1 (and the corresponding heading levels in the other
selectors) so .docs-content h1:first-of-type (and the analogous selectors) will
match the first heading of that type regardless of preceding elements like
main/breadcrumb or version-banner.
- Around line 42-46: The rule always shifts .ocm-section-page even when no
sidebar exists; restrict the desktop padding to only pages that sit next to the
sidebar by scoping the media query rule to when .docs-sidebar is present (e.g.
replace the selector inside the `@media` (min-width:1200px) block with a
sibling/ancestor selector such as .docs-sidebar + .ocm-section-page or
.docs-sidebar ~ .ocm-section-page so padding-left: 3.8rem only applies when
.docs-sidebar is rendered).

In `@layouts/_partials/sidebar/render-section-menu.html`:
- Around line 35-38: The current logic initializes $linkContent with
$node.Page.LinkTitle then overwrites it with $node.Name, which causes Name to
take precedence and prevents LinkTitle customizations from showing; update the
fallback order so LinkTitle wins: initialize $linkContent from $node.Name (or
use a conditional) and then, if $node.Page.LinkTitle is set, assign $linkContent
= $node.Page.LinkTitle (or implement if/else that uses $node.Page.LinkTitle when
present, otherwise $node.Name) — look for the variables $linkContent,
$node.Page.LinkTitle and $node.Name in render-section-menu.html and swap the
assignment logic accordingly.

---

Outside diff comments:
In `@assets/scss/common/_header-custom.scss`:
- Around line 198-204: The rule block for selectors .btn-link, .nav-link,
.header-github-pill, .mode-toggle uses the mixin `@include` navbar-control-reset;
but violates stylelint declaration-empty-line-before — add a single blank line
after the mixin include inside that rule so there is an empty line between the
include and the following height declaration (i.e., ensure `@include`
navbar-control-reset; is followed by one blank line, then height: 32px
!important;).

---

Nitpick comments:
In `@config/_default/module.toml`:
- Line 129: The comment above the module pin is out of date: the toml now
contains version = "v0.2.0" but the doc note still says “dev: uses latest”;
update that nearby comment block to state that the module is pinned to v0.2.0
(or otherwise reflect the pinned import) so the documentation matches the actual
version string (search for version = "v0.2.0" and edit the surrounding comment
text).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7a0a8b3d-beec-46aa-9e96-08bae521738d

📥 Commits

Reviewing files that changed from the base of the PR and between eef9938 and 0da708c.

📒 Files selected for processing (13)
  • assets/js/custom.js
  • assets/scss/common/_base.scss
  • assets/scss/common/_branding.scss
  • assets/scss/common/_cards.scss
  • assets/scss/common/_components.scss
  • assets/scss/common/_header-custom.scss
  • assets/scss/common/_pages.scss
  • assets/scss/common/_sidebar.scss
  • assets/scss/common/_variables-custom.scss
  • assets/scss/common/_version-warning.scss
  • config/_default/module.toml
  • content/docs/getting-started/_index.md
  • layouts/_partials/sidebar/render-section-menu.html

Comment thread assets/js/custom.js
Comment thread assets/scss/common/_components.scss
Comment thread assets/scss/common/_components.scss
Comment thread assets/scss/common/_pages.scss
Comment thread assets/scss/common/_pages.scss Outdated
Comment thread layouts/_partials/sidebar/render-section-menu.html Outdated
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
@morri-son

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Mar 24, 2026

Copy link
Copy Markdown
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

…ebar

On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
@morri-son morri-son merged commit 8bb92e6 into open-component-model:main Mar 24, 2026
11 checks passed
ocmbot Bot pushed a commit that referenced this pull request Mar 24, 2026
<!-- markdownlint-disable MD041 -->
#### What this PR does / why we need it
Improve design of website and clean up CSS rules

- Fix sidebar scrollbar
- Fix left margin of sidebar
- Fix color of section headers in sidebar
- Enable click on section header navigates to overview section
- Clean up CSS rules: remove duplicates, remove !important where
possible, remove hard-coded values and replace by variables.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Enhanced sidebar navigation with improved link handling and active
state detection
* Getting Started section now collapses by default for streamlined
navigation

* **Style**
* Standardized theme colors across the site using CSS custom properties
* Refined spacing, typography, and layout alignment for better visual
consistency

* **Chores**
  * Updated core CLI module to v0.2.0

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
Co-authored-by: Gerald Morrison (SAP) <gerald.morrison@sap.com> 8bb92e6
@morri-son morri-son deleted the back-to-default-sidebar branch March 24, 2026 10:32
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

kind/chore chore, maintenance, etc.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants