diff --git a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss index f5d48164532657cbf080a5f6af7221efbb56f12e..c83284ea5fc2f5244775c9071698bf8a5d8488a5 100644 --- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss +++ b/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; + } + } } } diff --git a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.tsx b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.tsx index 0dc5e683e6d39f7a61d658b374a6fee8400bfc54..c25e9e2f788998f0846489809dcc2a014daeffd4 100644 --- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.tsx +++ b/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; diff --git a/src/components/navigation/menu-sidebar/menu-sidebar.scss b/src/components/navigation/menu-sidebar/menu-sidebar.scss index ac42203a60e18f1eb010d1367b28f02ff89caad6..907d4d233064c18c3dfa39513233f1390dcf808d 100644 --- a/src/components/navigation/menu-sidebar/menu-sidebar.scss +++ b/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; + } } } }