Merge pull request #45278 from github/repo-sync

Repo sync

Author: docs-bot

src/frame/components/sidebar/SidebarCollapseContext.tsx

@@ -84,6 +84,21 @@ export function SidebarCollapseProvider({
     setMobileNavOpen(false)
   }, [asPath])
 
+  // Growing the viewport to the desktop (xxl) layout takes over from the inline
+  // mobile nav and hides its toggle, so close the mobile nav when we cross the
+  // breakpoint — otherwise its open state stays stuck and keeps the content
+  // column hidden. 1400px mirrors breakpoint-xxl.scss.
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia('(min-width: 1400px)')
+    const handle = (e: MediaQueryListEvent | MediaQueryList) => {
+      if (e.matches) setMobileNavOpen(false)
+    }
+    handle(mql) // close immediately if already at/above xxl on mount
+    mql.addEventListener('change', handle)
+    return () => mql.removeEventListener('change', handle)
+  }, [])
+
   const value = useMemo(
     () => ({
       collapsed,

src/frame/components/sidebar/SidebarNav.module.scss

@@ -11,9 +11,16 @@
 }
 
 // When the mobile nav is expanded inline, the rail spans the full width and
-// flows in the page (no fixed height / sticky) below the xxl breakpoint.
+// flows in the page (no fixed height / sticky) below the xxl breakpoint. At xxl
+// the desktop rail takes over, so revert to the fixed rail width even if the
+// mobile-open state is momentarily still set (e.g. mid-resize) — otherwise the
+// full-width rail covers the article content.
 .sidebarFullMobileOpen {
   width: 100%;
+
+  @include breakpoint-xxl {
+    width: 326px;
+  }
 }
 
 .sidebarContentFull {

src/landings/components/SidebarProduct.module.scss

@@ -1,5 +1,28 @@
 // The tree's typography now comes from @primer/react-brand NavList's own scale
 // (level-1 section headers at size-200, leaves at size-100). This class is kept
-// as the wrapper hook for `data-testid="sidebar"`; intentionally has no rules.
+// as the wrapper hook for `data-testid="sidebar"`.
 .sidebar {
+  // Brand's NavList draws the active accent bar only on nested leaves — its rule
+  // explicitly excludes level-1 (`.item--leaf:not(.item--level-1) .link[aria-current]`),
+  // so a top-level article like "Quickstart" gets only the subtle background pill
+  // and no green bar. Restore the bar for active top-level leaves to match nested
+  // items. Brand's classes are hashed, so match on the stable substrings.
+  :global([class*="NavList__item--leaf"][class*="NavList__item--level-1"])
+    :global([class*="NavList__link"])[aria-current]:not(
+      [aria-current="false"]
+    )::before {
+    content: "";
+    position: absolute;
+    // Level-1 links are shorter (~24px) than nested leaves, so use a small inset
+    // to keep the bar roughly the height of the background pill rather than the
+    // larger inset brand applies to taller nested items.
+    inset-block: var(--base-size-2);
+    // Level-1 leaves have no inline padding, so pull the bar into the NavList's
+    // own inline padding gutter to sit left of the label — matching where brand
+    // places the level-1 indicator on expandable section toggles.
+    inset-inline-start: calc(-1 * var(--base-size-8));
+    width: var(--base-size-4);
+    border-radius: var(--base-size-2);
+    background-color: var(--brand-NavList-activeIndicator-color);
+  }
 }