From 8dc9d23acacb826cca5bce10ee097a1f9cc7ab74 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Wed, 3 Mar 2021 11:08:46 +0200
Subject: [PATCH] group main menu
---
.../hy-menu-main-group.scss | 57 +++++++++++++++++++
.../hy-menu-main-group/hy-menu-main-group.tsx | 11 ++--
src/components/site-header/site-header.scss | 17 ++++++
src/components/site-header/site-header.tsx | 3 +-
4 files changed, 82 insertions(+), 6 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 5d4e87f3..90bad91b 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
@@ -1,3 +1,60 @@
:host {
display: block;
}
+
+:host(.menu--main-group) {
+ align-items: center;
+ display: flex;
+ flex-flow: row;
+ position: relative;
+}
+
+.menu--main-group__toggle {
+ @include font-size(14px, 24px);
+ align-items: center;
+ background: var(--grayscale-black);
+ border: 0 none;
+ color: var(--grayscale-white);
+ display: flex;
+ flex-flow: row;
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.4px;
+ margin: 0 -4px;
+ padding: 0;
+
+ &:focus {
+ }
+ &:hover {
+ }
+}
+
+.menu--main-group__dropdown {
+ display: none;
+ visibility: hidden;
+
+ &.is-open {
+ background-color: var(--grayscale-black);
+ border-radius: 0 0 5px 5px;
+ 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;
+ margin: 0;
+ padding: 15px;
+ position: absolute;
+ visibility: visible;
+ width: max-content;
+ z-index: 100;
+
+ .menu-main-link {
+ @include font-size(16px, 20px);
+ text-decoration: none;
+ }
+ .menu--main-group__label {
+ color: var(--grayscale-white);
+ }
+ }
+}
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 a3369901..0915840f 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
@@ -53,18 +53,21 @@ export class HyMenuMainGroup {
}}
//aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon class={'menu--main-group__globe-icon'} icon={'hy-icon-globe'} size={14} fill={white} />
- <span>University main menu</span>
<hy-icon class={'menu--main-group__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={white} />
+ <span>University main menu</span>
</button>
<div
class={{
- 'menu--language__dropdown': true,
+ 'menu--main-group__dropdown': true,
'is-open': this.isMenuOpen,
}}
>
{this._dataMainMenu.map((item) => {
- return <a href={item.url}>{item.label}</a>;
+ return (
+ <a href={item.url} class={{'menu-main-link': true}}>
+ <span class={'menu--main-group__label'}>{item.label}</span>
+ </a>
+ );
})}
</div>
</Host>
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index f2299aac..fc6c275c 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -120,6 +120,23 @@
fill: var(--brand-main);
}
}
+
+ &.group {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+
+ &:hover {
+ color: var(--grayscale-medium);
+ a,
+ span {
+ color: var(--grayscale-medium) !important;
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
+ }
}
.hy-site-header__menu-container {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index a4c55411..688e7941 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -238,10 +238,9 @@ export class SiteHeader {
url={this.siteUrl}
label={this.siteLabel}
/>
+ <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
</div>
- <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
-
<div class={'menu--secondary menu--secondary--group'}>
<hy-menu-language
class={'menu--secondary__item is-first group'}
--
GitLab