Content below Sky Nav animates again (#1986)

Author: gerardo-rodriguez

.changeset/flat-points-smoke.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix bug where content below Sky Nav was not animating open/closed

src/components/sky-nav/sky-nav.ts

@@ -57,15 +57,6 @@ export const initSkyNav = (navButton: HTMLButtonElement) => {
       return;
     }
 
-    // We need to keep track of the siblings after the menu,
-    // because we will push them down for the animation
-    const elementsToShift: HTMLElement[] = [navWrapper];
-    let sibling: HTMLElement | null = navWrapper;
-    // eslint-disable-next-line no-unmodified-loop-condition
-    while ((sibling = sibling.nextElementSibling as HTMLElement | null)) {
-      elementsToShift.push(sibling);
-    }
-
     const duration = Number.parseFloat(tokens.time.transition.slow.value);
     const transition = `transform ${duration}s ${tokens.ease.in_out.value}`;
     clearTimeout(timeoutId);
@@ -74,34 +65,31 @@ export const initSkyNav = (navButton: HTMLButtonElement) => {
     const heightDiff = menu.getBoundingClientRect().height;
     if (isExpanded) {
       // Closing menu: slide the elements up before hiding the menu
-      for (const el of elementsToShift) {
-        el.style.transition = transition;
-        el.style.transform = `translateY(${-heightDiff}px)`;
-      }
+      document.body.style.setProperty('transition', transition);
+      document.body.style.setProperty(
+        'transform',
+        `translateY(${-heightDiff}px)`
+      );
 
       timeoutId = setTimeout(() => {
         menu.hidden = true;
-        for (const el of elementsToShift) {
-          el.style.transition = '';
-          el.style.transform = '';
-        }
+        document.body.style.removeProperty('transition');
+        document.body.style.removeProperty('transform');
       }, duration * 1000) as any as number;
     } else {
       // Opening menu: start the elements higher than their "resting position" and then slide them down
-      for (const el of elementsToShift)
-        el.style.transform = `translateY(${-heightDiff}px)`;
+      document.body.style.setProperty(
+        'transform',
+        `translateY(${-heightDiff}px)`
+      );
 
       // Flush changes to the DOM
       // eslint-disable-next-line @cloudfour/typescript-eslint/no-unused-expressions, mdx/no-unused-expressions
       navWrapper.offsetWidth;
-      for (const el of elementsToShift) {
-        el.style.transition = transition;
-        el.style.transform = '';
-      }
+      document.body.style.setProperty('transition', transition);
+      document.body.style.removeProperty('transform');
       timeoutId = setTimeout(() => {
-        for (const el of elementsToShift) {
-          el.style.transition = '';
-        }
+        document.body.style.removeProperty('transition');
       }, duration * 1000) as any as number;
     }
   };

src/components/sky-nav/sky-nav.twig

@@ -106,9 +106,31 @@
   @see https://github.com/twigjs/twig.js/issues/262
 #}
 {% if include_main_demo %}
-  <main class="o-container o-container--pad" id="{{ main_id }}">
-    <div class="o-container__content">
-      <p>Hello world! This is the main content.</p>
+  <main id="main" class="o-page__content" style="">
+    <div class="c-cloud-cover t-dark">
+      <div class="o-container o-container--pad-inline">
+        <div class="o-container__content c-cloud-cover__inner">
+          <div class="c-cloud-cover__content">
+            <div class="o-rhythm o-rhythm--condensed">
+              <div class="c-cloud-cover__heading">
+                <h1 class="c-heading c-heading--level-n2">
+                  Team
+                </h1>
+              </div>
+              <div class="c-cloud-cover__copy">
+                <div class="o-rhythm">
+                  Teamwork makes the dream work
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="o-container o-container--pad">
+      <div class="o-container__content">
+        <p>This is some content.</p>
+      </div>
     </div>
   </main>
 {% endif %}