From 465d0b2de693dd3d4fd3a4f935473c01537691a2 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Thu, 14 Jan 2021 10:39:13 +0200
Subject: [PATCH] header menu arrow links
---
.../hy-main-content-wrapper.scss | 6 +++---
.../hy-desktop-menu-links.scss | 20 ++++++++++++++-----
.../hy-desktop-menu-links.tsx | 16 +++++++++++++++
3 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
index e2e51ea4..ff3c95e0 100644
--- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
+++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
@@ -17,7 +17,7 @@
padding: 0 2rem;
}
- // Large desktop Layout >1441px
+ // Large desktop Layout >1600px
@include breakpoint($xlarge) {
max-width: 1216px;
padding: 0;
@@ -38,9 +38,9 @@
padding: 0 2rem;
}
- // Large desktop Layout >1441px
+ // Large desktop Layout >1200px
@include breakpoint($extrawide) {
- max-width: 1440px;
+ max-width: 1216px;
padding: 0;
}
}
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index 0bd5d48a..2fb1abc8 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -19,14 +19,20 @@
padding: 0;
width: 100%;
+ li {
+ //width: min-content;
+ //min-width: min-content;
+ //max-width: max-content;
+ //width: 100%;
+ }
+
// First level menu items
.desktop-menu-link {
background-color: transparent;
- //border: none;
+ border: none;
color: var(--brand-main-nearly-black);
cursor: pointer;
font-family: var(--main-font-family);
- border: 1px solid red;
@include breakpoint($extrawide) {
@include font-size(14px, 14px);
@@ -65,7 +71,10 @@
}
&__label {
- border: 1px solid blue;
+ width: min-content;
+ @include breakpoint($xlarge) {
+ width: 100%;
+ }
}
hy-icon {
@@ -115,7 +124,7 @@
&--is-active {
background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
- box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.2);
+ box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
display: flex;
flex-direction: row;
opacity: 1;
@@ -151,6 +160,7 @@
&__desktop-menu {
display: flex;
margin-bottom: -8px;
+ margin-top: 6px;
&__menu-items {
//@todo check max-with in Specs
@@ -291,7 +301,7 @@
left: 0; // override in js
list-style: none;
min-width: 350px;
- margin: 0 4px;
+ margin: 6px 4px 0 4px;
max-width: 400px;
padding: 0 48px;
top: 0;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 657a118d..2eecceed 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -50,6 +50,22 @@ export class HyDesktopMenuLinks {
this.dataDesktopLinksWatcher(this.dataDesktopLinks);
}
+ /*
+ @Listen('resize', {target: 'window'})
+ resizeEventListener(event) {
+ if (!event) return;
+
+ const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
+ if (breadcrumbsElement) {
+ if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
+ this.adjustBreadcrumbsMenuVisibility(true);
+ } else {
+ this.adjustBreadcrumbsMenuVisibility(false);
+ }
+ }
+ }
+ */
+
showBackdropShadow(state = 'close', top = 0) {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
--
GitLab