diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx b/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
index b51dc916b76da6dddfa399f03ab2a35b15b058c1..548d94cfdb16486cf8a2a3cb5e3fec1124a2e911 100644
--- a/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
+++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
@@ -44,10 +44,11 @@ export class HyBreadcrumbs {
breadcrumbsWidth = this.el.offsetWidth + 64;
const layoutContentElement = document.getElementsByClassName('layout-content')[0] as HTMLElement;
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
-
- if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
- moreButton.setAttribute('aria-hidden', 'false');
- this.adjustBreadcrumbsMenuVisibility();
+ if (layoutContentElement) {
+ if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
+ moreButton.setAttribute('aria-hidden', 'false');
+ this.adjustBreadcrumbsMenuVisibility();
+ }
}
}
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 261cb1f223bfe0727bb0ccb154cdafc97e7183d3..3e465d6b541e9f674916a278b442cf729dc91eb7 100644
--- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
+++ b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
@@ -1,5 +1,6 @@
-.hy-menu-sidebar--container.sidebar-open {
- .hy-menu-item-sidebar:not(.is-parent) {
+.hy-menu-sidebar--container.sidebar-open,
+.hy-menu-sidepanel--container.sidepanel-open {
+ .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) {
.hy-menu-item-sidebar__label,
.hy-menu-item__label__icon {
background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
@@ -7,7 +8,63 @@
}
.hy-menu-item-sidebar.is-parent {
.hy-menu-item-sidebar__label {
- background: none;
+ background-color: none !important;
+ }
+ }
+
+ .hy-menu-item-sidebar:not(.is-parent) {
+ .hy-menu-item-sidebar__label {
+ &:hover {
+ background: var(--hover-gray) !important;
+ text-decoration: underline;
+ }
+ }
+
+ .hy-menu-item__label__icon {
+ &:not([aria-expanded='true']):hover {
+ background: var(--hover-gray) !important;
+ cursor: pointer;
+
+ svg {
+ width: 22px;
+ height: 22px;
+ }
+ }
+
+ &[aria-expanded='true']:hover {
+ background: var(--brand-main);
+ cursor: pointer;
+ transition: all 0.25s ease;
+
+ .hy-menu-item__label__icon__svg {
+ transform: rotate(180deg) translateX(2px);
+ }
+ svg {
+ width: 22px;
+ height: 22px;
+ }
+ }
+ }
+ }
+}
+
+.hy-menu-sidebar--container:not(.sidebar-open) {
+ .hy-menu-item-sidebar:not(.is-parent) {
+ .hy-menu-item-sidebar__label {
+ &:hover {
+ border: 1px solid var(--brand-main);
+ margin: -1px;
+ text-decoration: underline;
+ }
+ }
+
+ .hy-menu-item__label__icon {
+ &:hover {
+ border: 1px solid var(--brand-main);
+ margin: -1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
}
}
}
@@ -18,9 +75,7 @@
&--label-container {
@include font-size(14px, 20px);
- @include font-weight($bold);
- background-color: var(--grayscale-white);
- border: 0.5px solid rgba(16, 126, 171, 0.1);
+ @include font-weight($semibold);
box-sizing: border-box;
color: var(--brand-main-light);
display: flex;
@@ -40,9 +95,9 @@
outline-offset: 4px;
}
- &:hover {
+ /* &:hover {
color: var(--brand-main-nearly-black);
- }
+ } */
> .hy-menu-level-container.hy-menu-level-container--sidepanel {
display: none;
}
@@ -90,6 +145,7 @@
&__label {
align-items: center;
+ background-color: var(--grayscale-white);
color: var(--brand-main-light);
display: flex;
hyphens: auto;
@@ -98,11 +154,6 @@
width: 100%;
word-break: break-word;
- &:hover {
- background: var(--hover-gray) !important;
- text-decoration: underline;
- }
-
&:focus {
outline: none;
box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
@@ -114,12 +165,13 @@
border-top: 0;
border-right: 0;
border-bottom: 0;
- background: none;
- border-left: 1px dotted var(--brand-main-light);
+ background: var(--grayscale-white);
+ border-left: 1px solid var(--brand-main-light);
color: var(--brand-main-light);
display: inline-block;
position: relative;
width: 61.5px;
+ margin-left: 6px;
min-height: 48px;
svg {
@@ -129,30 +181,6 @@
transform: translate(-50%, -50%);
}
- &:not([aria-expanded='true']):hover {
- background: var(--hover-gray) !important;
- cursor: pointer;
-
- svg {
- width: 22px;
- height: 22px;
- }
- }
-
- &[aria-expanded='true']:hover {
- background: var(--brand-main);
- cursor: pointer;
- transition: all 0.25s ease;
-
- .hy-menu-item__label__icon__svg {
- transform: rotate(180deg) translateX(2px);
- }
- svg {
- width: 22px;
- height: 22px;
- }
- }
-
&:focus {
outline: none;
box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
@@ -162,7 +190,6 @@
&.is-parent {
align-items: flex-start;
- background: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
@@ -180,10 +207,10 @@
.hy-menu-item-sidebar__label {
@include font-size(26px, 26px);
+ background-color: transparent !important;
font-family: var(--main-font-family);
font-weight: bold;
letter-spacing: -0.81px;
- margin: 0 0 0 0.5rem;
padding: 0;
text-decoration: none;
text-transform: uppercase;
@@ -191,9 +218,17 @@
}
&:hover {
+ span {
+ background: none;
+ border: none;
+ margin: 0;
+ }
+
a {
+ border: none;
color: var(--brand-main) !important;
text-decoration: underline;
+ margin: 0;
}
.hy-menu-item__parent__icon__svg {
fill: var(--brand-main-nearly-black);
@@ -242,7 +277,7 @@
> .hy-menu-item-sidebar--label-container {
align-items: flex-end;
- margin: 0;
+ margin: 0 0 0 0.5rem;
padding: 0;
}
}