Merge pull request #70 from zerodevapp/fix/pillar-bar-mobile-desktop

fix(pillar-bar): stop sidebar clip on desktop and overlap on mobile

Author: jayeshbhole

vocs.config.tsx

@@ -1301,8 +1301,9 @@ export default defineConfig({
     margin-top: var(--zd-pillar-bar-height);
   }
 
-  /* Pillar bar: fixed horizontal nav directly below the top header.
-     Mounted at document.body so it escapes the fixed-height gutterTop. */
+  /* Pillar bar: horizontal nav directly below the top header. Inserted in-flow
+     right after Vocs's gutterTop; pinned fixed on desktop (below), in-flow on
+     mobile (see media query). */
   .zd-pillar-bar {
     position: fixed;
     top: var(--vocs-topNav_height, 56px);
@@ -1313,13 +1314,16 @@ export default defineConfig({
     align-items: center;
     gap: 4px;
     height: var(--zd-pillar-bar-height);
-    /* Match Vocs's leftGutterWidth calc — that variable is scoped to
-       .vocs_DocsLayout so it's not visible on body. Recompute it here using
-       :root-scoped vars so the bar's content aligns with the search bar. */
-    padding-left: max(
+    /* Start the bar AFTER the sidebar gutter instead of spanning full width.
+       Vocs's leftGutterWidth var is scoped to .vocs_DocsLayout (not visible on
+       body), so recompute the same max() here. Anchoring left to it keeps the
+       bar from overlapping the fixed sidebar (gutterLeft, z-index 14) — the
+       pillar bar's z-index 50 would otherwise paint over the sidebar's top. */
+    left: max(
       calc((100vw - var(--vocs-content_width)) / 2),
       var(--vocs-sidebar_width)
     );
+    padding-left: 0;
     padding-right: 24px;
     border-bottom: 1px solid var(--vocs-color_border);
     background: var(--vocs-color_background);
@@ -1349,12 +1353,21 @@ export default defineConfig({
     background: var(--vocs-color_backgroundIrisTint);
   }
 
-  /* On narrow viewports, Vocs hides the desktop top nav and shows a mobile drawer.
-     Hide the pillar bar there too — Vocs's mobile menu will surface pillar links via
-     the sidebar. */
+  /* On narrow viewports Vocs makes the top nav position:initial (in normal flow)
+     and shows a sticky section curtain below it. The bar is inserted in-flow
+     right after the top nav, so drop the fixed positioning and let it stack
+     naturally — a fixed bar would float over and hide that curtain. No sidebar
+     gutter here either, so span full width. */
   @media (max-width: 1080px) {
-    .zd-pillar-bar { display: none; }
-    .vocs_DocsLayout_content { padding-top: var(--vocs-topNav_height, 56px) !important; }
+    .zd-pillar-bar {
+      position: static;
+      padding-left: 8px;
+      /* Match the mobile top nav / curtain background (both use backgroundDark). */
+      background: var(--vocs-color_backgroundDark);
+    }
+    /* Top nav is in-flow on mobile, so content needs no extra top padding;
+       the in-flow bar already occupies its own space. */
+    .vocs_DocsLayout_content { padding-top: 0 !important; }
     .vocs_DocsLayout_gutterRight { margin-top: 0; }
   }
 </style>`;
@@ -1402,11 +1415,16 @@ export default defineConfig({
 
   function mount() {
     if (document.getElementById('zd-pillar-bar')) return;
-    if (!document.body) return;
+    // Insert as a sibling right after Vocs's top-nav container so the bar lives
+    // in normal document flow. On desktop (>=1081px) the CSS pins it with
+    // position:fixed (DOM position irrelevant). On mobile (<=1080px) Vocs makes
+    // the top nav position:initial (in-flow) and shows a sticky section curtain;
+    // an in-flow bar here sits correctly below the nav instead of a fixed bar
+    // floating over and hiding that curtain.
+    var gutterTop = document.querySelector('.vocs_DocsLayout_gutterTop');
+    if (!gutterTop || !gutterTop.parentNode) return;
     var bar = build();
-    // Mount at body level so it escapes Vocs's fixed-height gutterTop container.
-    // The CSS pins it via position:fixed below the existing top nav.
-    document.body.appendChild(bar);
+    gutterTop.parentNode.insertBefore(bar, gutterTop.nextSibling);
     updateActive();
   }