fix: CSS fix to properly highlight the correct active page / link in the Nav; improve dropdown open / close animation

Author: sghoweri

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -73,7 +73,7 @@
 @mixin accordionPanel() {
   overflow: hidden;
   max-height: 0;
-  transition: max-height $pl-animate-quick ease-out;
+  transition: all $pl-animate-quick ease-out;
 
   /**
   * Active styles for when the accordion panel is open

packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss

@@ -45,20 +45,6 @@
     }
   }
 
-  /**
-     * All Nav links inside of subnav dropdown
-     */
-
-  /**
-    * Last sublist item
-    */
-  .pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link {
-    @media all and (min-width: $pl-bp-med) {
-      border-bottom-left-radius: $pl-border-radius-med;
-      border-bottom-right-radius: $pl-border-radius-med;
-    }
-  }
-
   /**
      * Size input
      */

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

@@ -198,6 +198,23 @@ pl-nav {
   .pl-c-body--theme-sidebar & {
     width: 100%;
   }
+
+  &:not(.pl-c-nav__link--title).pl-is-active {
+    box-shadow: inset 4px 0 0 #6c79d9;
+
+    // move the "active" border style to the bottom on ONLY the top level links (ex. "All")
+    @media all and (min-width: $pl-bp-med) {
+      &.pl-c-nav__link--pattern {
+        .pl-c-body--theme-horizontal & {
+          box-shadow: inset 0 -4px 0 #6c79d9;
+        }
+
+        .pl-c-nav__sublist & {
+          box-shadow: inset 4px 0 0 #6c79d9;
+        }
+      }
+    }
+  }
 }
 
 .pl-c-nav__link,
@@ -244,7 +261,6 @@ pl-nav {
 
   &.pl-is-active {
     box-shadow: inset 4px 0 0 #6c79d9;
-    pointer-events: none;
   }
 }
 
@@ -257,9 +273,16 @@ pl-nav {
 }
 
 .pl-c-nav__link--pattern {
-  padding-left: 0.75rem;
+  padding-left: 1.45rem;
   padding-right: 0.75rem;
   flex-grow: 1;
+  font-size: .8rem;
+
+  @media all and (min-width: $pl-bp-med) {
+    .pl-c-body--theme-horizontal & {
+      padding-left: 0.75rem;
+    }
+  }
 }
 
 .pl-c-nav__link-text {
@@ -306,8 +329,9 @@ pl-nav {
     border-width: 1px;
     box-shadow: 0 2px 5px rgba(0,0,0,.1);
     transition: all .2s ease;
-    transform: translateY(12px);
+    transform: translateY(-12px);
     z-index: 1;
+    transition: all $pl-animate-quick ease-out;
 
     .pl-c-body--theme-sidebar & {
       border-width: 0;
@@ -333,6 +357,7 @@ pl-nav {
   @include listReset();
   @include accordionPanel();
   visibility: hidden;
+  opacity: 0;
 
   @media all and (min-width: $pl-bp-med) {
     .pl-c-body--theme-sidebar & {
@@ -558,6 +583,7 @@ pl-nav {
   visibility: visible;
   max-height: none;
   transform: translateY(0);
+  opacity: 1;
 
   .pl-c-body--theme-horizontal & {
     overflow: auto;