From 5f85f6a9b075139ae903fab96c03ffc2858d5382 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Wed, 9 Dec 2020 13:35:26 +0200
Subject: [PATCH] Minor tweaks to side menu styles
---
.../menu-item-sidebar/menu-item-sidebar.scss | 6 ++++
.../menu-item-sidebar/menu-item-sidebar.tsx | 29 +++++++++----------
.../navigation/menu-sidebar/menu-sidebar.scss | 14 +++++----
3 files changed, 28 insertions(+), 21 deletions(-)
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 f5d48164..c83284ea 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 0dc5e683..c25e9e2f 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 ac42203a..907d4d23 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;
+ }
}
}
}
--
GitLab