From e7eb1863604c8a06129c4ca71214c44d18897733 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Thu, 12 Nov 2020 14:56:17 +0200
Subject: [PATCH] Add active state for the menu item heading
---
.../navigation/menu-item/menu-item.scss | 28 +++++++++++++++++--
.../menu-level-container.tsx | 5 ++++
2 files changed, 31 insertions(+), 2 deletions(-)
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 2bcafc7e..8d32e97b 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -1,7 +1,6 @@
// Mobile.
:host(.hy-menu-item--mobile) {
--menu-item-display: flex;
- background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
display: flex;
margin-left: 12px;
margin-right: 12px;
@@ -117,6 +116,7 @@ a {
}
&.hy-menu-item--mobile {
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
color: var(--brand-main-light);
padding: 12px 12px 12px 20px;
@@ -136,6 +136,30 @@ a {
transform: translate(-50%, -50%);
}
}
+
+ &.is-heading {
+ @include font-size(24px, 24px);
+ @include font-weight($bold);
+ background: transparent;
+ border-bottom: 3px solid var(--brand-main-light);
+ color: var(--brand-main-light);
+ margin-top: -24px;
+ padding-bottom: 24px;
+ padding-top: 24px;
+ text-transform: uppercase;
+
+ &.is-active,
+ &.in-active-trail {
+ @include font-weight($bold);
+ color: var(--grayscale-black);
+ position: relative;
+
+ &:before {
+ border-left-width: 4px;
+ height: 55%;
+ }
+ }
+ }
}
&.hy-menu-item--desktop {
@@ -273,7 +297,7 @@ a {
.hy-menu-item__button {
align-items: center;
- background: transparent;
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
border-bottom: 0;
border-left: 1px dashed var(--brand-main-light);
border-right: 0;
diff --git a/src/components/navigation/menu-level-container/menu-level-container.tsx b/src/components/navigation/menu-level-container/menu-level-container.tsx
index 6233f212..ec25ffff 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -98,6 +98,10 @@ export class MenuLevelContainer {
...this.headingItem,
label: parentMenuItem.getAttribute('label'),
};
+ this.headingItem = {
+ ...this.headingItem,
+ isActive: window.location.pathname === this.headingItem.url,
+ };
} else {
this.triggerItem = 'home';
}
@@ -149,6 +153,7 @@ export class MenuLevelContainer {
label={this.headingItem.label}
url={this.headingItem.url}
isHeading={true}
+ isActive={this.headingItem.isActive}
menu-type={'mobile'}
/>
<slot />
--
GitLab