fix: small UI fixes for the sticky Tabs header on smaller screens + drawer content collapsing on smaller screens + better handling of Nav link cleanup when changing pages

Author: sghoweri

packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss

@@ -54,7 +54,7 @@
  */
 .pl-c-pattern-info__panel {
   padding: .5rem;
-  flex-shrink: 1;
+  flex-shrink: 0; // prevent panel from collapsing in height (especially on smaller screens like iPhone)
   display: flex;
   flex-direction: column;
 

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -67,6 +67,7 @@
 
 .pl-c-tabs__header {
   position: sticky;
+  z-index: 1; // fix for Safari for iOS sticky header appearing to be below the scrollable content
   top: 0px;
   border-top: 1px solid #ddd;
   margin-left: calc(-0.5rem - 1px);

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

@@ -293,6 +293,14 @@ class Nav extends BaseComponent {
         this.navAccordionPanels.forEach(panel => {
           panel.classList.remove('pl-is-active');
         });
+      } else if (this.layoutMode === 'vertical' && window.innerWidth <= 670) {
+        this.navContainer.classList.remove('pl-is-active');
+        this.navAccordionTriggers.forEach(trigger => {
+          trigger.classList.remove('pl-is-active');
+        });
+        this.navAccordionPanels.forEach(panel => {
+          panel.classList.remove('pl-is-active');
+        });
       } else {
         this.navContainer.classList.remove('pl-is-active');
       }
@@ -331,6 +339,7 @@ class Nav extends BaseComponent {
         )
       ) {
         activeLink.parentNode.classList.add('pl-is-active');
+        this.previousActiveLinks.push(activeLink.parentNode);
       }
 
       const parentDropdown = activeLink.closest('.pl-js-acc-panel');
@@ -346,8 +355,8 @@ class Nav extends BaseComponent {
             ) &&
             shouldAutoOpenNav
           ) {
-            this.previousActiveLinks.push(parentDropdown.previousSibling);
             parentDropdown.previousSibling.classList.add('pl-is-active');
+            this.previousActiveLinks.push(parentDropdown.previousSibling);
             parentDropdownTrigger = parentDropdown.previousSibling.querySelector(
               '.pl-js-acc-handle'
             );

packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js

@@ -66,6 +66,7 @@ class Header extends BaseLitComponent {
       if (
         e.target !== this.navToggle &&
         !e.target.closest('.pl-js-nav-container') &&
+        !e.target.closest('pl-toggle-layout') &&
         this.isActive === true
       ) {
         this.isActive = false;