Merge branch 'NXSTAGE-1149-fix-sidemenu-location' into 'development'

Minor tweaks to side menu styles

See merge request julkiset-sivut/design-system-lib!99

src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss

@@ -190,5 +190,11 @@
       color: var(--grayscale-black);
       padding: 8px 10px 8px 6px !important;
     }
+
+    &.is-parent {
+      .hy-menu-item__parent__icon {
+        display: none;
+      }
+    }
   }
 }

src/components/navigation/menu-item-sidebar/menu-item-sidebar.tsx

@@ -57,22 +57,6 @@ export class MenuItemSidebar {
       this.isActive = true;
     }
 
-    // Notify breadcrumbs if item is in active trail.
-    if (this.inActiveTrail && !this.isActive) {
-      const currentParent = this.el.parentNode;
-      this.addBreadcrumb.emit({
-        url: this.url,
-        label: currentParent.parentElement.getAttribute('label'),
-        bid: this.menuLinkId,
-      });
-    }
-    if (this.inActiveTrail) {
-      const currentParent = this.el.parentNode as any;
-      if (this.menuType === MenuType.sidepanel) {
-        currentParent.classList.add('is-open');
-      }
-    }
-
     // If current menu item is active, trigger all parent menuLevelContainer
     // elements in the same active-trail to open the menu.
     if (this.isActive) {
@@ -110,6 +94,19 @@ export class MenuItemSidebar {
     }
   }
 
+  componentDidLoad() {
+    if (this.inActiveTrail) {
+      const currentParent = this.el.parentNode as any;
+      if (this.menuType === MenuType.sidepanel) {
+        currentParent.classList.add('is-open');
+        const childList = this.el.querySelector('.hy-menu-level-container') as HTMLElement;
+        if (childList) {
+          childList.classList.add('is-open');
+        }
+      }
+    }
+  }
+
   componentWillRender() {
     // Assign depth value to current menu item instance; 1st level, 2nd level, etc.
     this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;

src/components/navigation/menu-sidebar/menu-sidebar.scss

@@ -42,11 +42,6 @@
     .hy-menu-sidebar__panel-toggle {
       display: flex;
     }
-
-    // Open sidenav panels. Set background color to non-active items
-    :not(.is-parent):not(.is-active-item).hy-menu-item-sidebar .hy-menu-item-sidebar--label-container {
-      background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
-    }
   }
   .hy-menu-sidebar__panel-toggle,
   .hy-menu-sidebar__logo {
@@ -78,6 +73,12 @@
     display: flex;
     height: auto;
     width: 100%;
+
+    // Open sidenav panels. Set background color to non-active items
+    :not(.is-parent):not(.in-active-trail):not(.is-active-item).hy-menu-item-sidebar
+      .hy-menu-item-sidebar--label-container {
+      background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
+    }
   }
 }
 
@@ -90,6 +91,9 @@
 
     &[aria-hidden='false'] {
       min-height: var(--minHeight);
+      .hy-menu-item-sidebar.hy-menu-item-sidebar--sidenav.hy-menu-item--level-1.is-parent {
+        border-bottom: 1px solid var(--brand-main-light) !important;
+      }
     }
   }
 }