Skip to content

Commit

Permalink
fix(toc): adjust mobile selector, should always be navbar (#11589)
Browse files Browse the repository at this point in the history
### Related Ticket(s)

Closes #11587

### Description

Fixes sticky behavior issue with TOC Dotcom shell at less than lg breakpoint.

### Testing instructions

1. Open the Dotcom shell > Default
2. Scroll the page
3. The Masthead should be sticky until it reaches the TOC, then the masthead should scroll away, while the TOC becomes sticky to the top.
4. Repeat at both `lg` and less than `lg` breakpoints
5. Repeat 1-4 with the Dotcom shell > With ToC horizontal  story

### Changelog

**Changed**

- TOC dotcom shell sticky behavior fixed at less than lg breakpoint

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
m4olivei authored and kennylam committed Mar 20, 2024
1 parent 2f8fccf commit e8bcc23
Showing 1 changed file with 6 additions and 10 deletions.
16 changes: 6 additions & 10 deletions packages/utilities/src/utilities/StickyHeader/StickyHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,21 +74,17 @@ class StickyHeader {

const tocRoot = toc.shadowRoot;

const desktopSelector = `.${c4dPrefix}-ce--table-of-contents__items-container`;

this._tableOfContentsInnerBar = tocRoot.querySelector(
`.${prefix}--tableofcontents__navbar`
);
if (window.innerWidth > gridBreakpoint) {
if (toc.layout === 'horizontal') {
this._tableOfContentsInnerBar = tocRoot.querySelector(
`.${prefix}--tableofcontents__navbar`
);
this._tableOfContentsLayout = 'horizontal';
} else {
this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
this._tableOfContentsInnerBar = tocRoot.querySelector(
`.${c4dPrefix}-ce--table-of-contents__items-container`
);
}
} else {
this._tableOfContentsInnerBar = tocRoot.querySelector(
`.${prefix}--tableofcontents__sidebar`
);
}
}

Expand Down

0 comments on commit e8bcc23

Please sign in to comment.