From 4a01c17ef4355211aa965f65dd3f4291c5771ab2 Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Thu, 4 Mar 2021 13:15:29 +0200
Subject: [PATCH] university main menu dropdown
---
.../hy-menu-main-group.scss | 35 ++++++++++++++-----
.../hy-menu-main-group/hy-menu-main-group.tsx | 35 +++++++++++++++----
2 files changed, 54 insertions(+), 16 deletions(-)
diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.scss b/src/components/hy-menu-main-group/hy-menu-main-group.scss
index 9c41cfe4..b48d58b8 100644
--- a/src/components/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/hy-menu-main-group/hy-menu-main-group.scss
@@ -6,7 +6,6 @@
align-items: center;
display: flex;
flex-flow: row;
- position: relative;
margin-left: 28px;
@include breakpoint($narrow) {
margin-left: 32px;
@@ -17,7 +16,8 @@
}
.menu--main-group__toggle {
- @include font-size(14px, 24px);
+ @include font-size(14px, 16px);
+ @include font-weight($semibold);
align-items: center;
background: var(--grayscale-black);
border: 0 none;
@@ -25,8 +25,7 @@
display: flex;
flex-flow: row;
font-family: var(--main-font-family);
- font-weight: 600;
- letter-spacing: -0.4px;
+ letter-spacing: -0.44px;
margin: 0 -4px;
padding: 0;
@@ -34,6 +33,14 @@
}
&:hover {
}
+
+ svg {
+ }
+ span {
+ @include breakpoint($wide) {
+ margin-left: 17px;
+ }
+ }
}
.menu--main-group__dropdown {
@@ -46,22 +53,32 @@
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: var(--grayscale-white);
display: flex;
- flex-flow: column;
- justify-items: center;
- left: -15px;
+ left: 0;
margin: 0;
- padding: 15px;
+ padding: 6px 0 20px;
position: absolute;
+ top: 0;
visibility: visible;
- width: max-content;
+ width: 100%;
z-index: 100;
+ .list {
+ display: flex;
+ flex-flow: column;
+ justify-items: center;
+ position: relative;
+ }
.menu-main-link {
@include font-size(16px, 20px);
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 20px;
text-decoration: none;
}
.menu--main-group__label {
color: var(--grayscale-white);
+ margin-left: 12px;
}
}
}
diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/hy-menu-main-group/hy-menu-main-group.tsx
index 0915840f..b33399ac 100644
--- a/src/components/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/hy-menu-main-group/hy-menu-main-group.tsx
@@ -27,6 +27,22 @@ export class HyMenuMainGroup {
@Listen('click')
handleComponentClick(event) {
this.isMenuOpen = !this.isMenuOpen;
+
+ if (this.isMenuOpen) {
+ let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+ let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+ let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+ let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
+
+ if (hyTopHeader && mainMenuDropdown && mainMenuList && mainMenuToggle) {
+ let rectHeader = hyTopHeader.getBoundingClientRect();
+ let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+ mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+ mainMenuList.style.left = `${rectMenuToggle.left}px`;
+ }
+ }
+
event.stopPropagation();
}
@@ -62,13 +78,18 @@ export class HyMenuMainGroup {
'is-open': this.isMenuOpen,
}}
>
- {this._dataMainMenu.map((item) => {
- return (
- <a href={item.url} class={{'menu-main-link': true}}>
- <span class={'menu--main-group__label'}>{item.label}</span>
- </a>
- );
- })}
+ <div class="list">
+ {this._dataMainMenu.map((item) => {
+ return (
+ <a href={item.url} class={{'menu-main-link': true}}>
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={10} fill={white} />
+ </span>
+ <span class={'menu--main-group__label'}>{item.label}</span>
+ </a>
+ );
+ })}
+ </div>
</div>
</Host>
);
--
GitLab