Skip to content
Snippets Groups Projects
Commit af16a6e6 authored by druid's avatar druid
Browse files

lang menu links and menu lang selector styles

parent db3572f3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 164 additions and 76 deletions
src/components/navigation/menu-language/menu-language.scss
+ 53
− 33
View file @ af16a6e6
......@@ -13,16 +13,33 @@
:host(.menu--language:not([is-mobile])) {
@include breakpoint($narrow) {
height: 100%;
position: relative;
right: auto;
top: auto;
}
}
:host(.menu--language__is-open) {
&::after {
@include breakpoint($wide) {
content: ' ';
height: 4px;
background-color: var(--grayscale-black);
display: block;
width: 100%;
position: absolute;
bottom: 0;
//bottom: -24px;
//left: 0;
}
}
}
.menu--language__toggle {
@include font-size(14px, 24px);
align-items: center;
background: transparent;
background: var(--grayscale-white);
border: 0 none;
color: var(--brand-main-nearly-black);
display: flex;
......@@ -58,20 +75,20 @@
.menu--language__toggle__caret {
transform: rotate(180deg);
}
background-color: var(--grayscale-background-box);
//background-color: var(--grayscale-background-box);
@include breakpoint($wide) {
margin-bottom: -28px;
margin-top: -26px;
padding: 26px 8px 28px;
//margin-bottom: -28px;
//margin-top: -26px;
//padding: 26px 8px 28px;
}
@include breakpoint($extrawide) {
margin-bottom: -38px;
margin-top: -26px;
padding: 26px 8px 38px;
//margin-bottom: -38px;
//margin-top: -26px;
//padding: 26px 8px 38px;
}
@include breakpoint($xlarge) {
margin-bottom: -50px;
padding: 26px 12px 50px;
//margin-bottom: -50px;
//padding: 26px 12px 50px;
}
}
......@@ -84,36 +101,37 @@
}
.menu--language__dropdown {
background-color: var(--grayscale-white);
border-radius: 0 0 5px 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-flow: column;
justify-items: center;
margin: 0;
padding: 15px;
position: absolute;
right: 5px;
text-transform: uppercase;
top: 40px;
display: none;
visibility: hidden;
@include breakpoint($wide) {
padding: 32px 0 0;
top: 70px;
}
@include breakpoint($extrawide) {
top: 80px;
}
@include breakpoint($xlarge) {
top: 90px;
}
&.is-open {
background-color: var(--grayscale-white);
border-radius: 0 0 5px 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-flow: column;
justify-items: center;
left: -15px;
margin: 0;
padding: 15px;
position: absolute;
text-transform: uppercase;
visibility: visible;
width: max-content;
z-index: 100;
@include breakpoint($wide) {
//@todo check side paddings
left: -32px;
padding: 32px 0 0;
}
@include breakpoint($xlarge) {
left: -40px;
padding: 40px 0 0;
}
a {
//@todo check fonts
@include font-size(16px, 20px);
margin-left: 0;
}
......@@ -135,6 +153,7 @@
}
}
/*
.hy-menu-backdrop {
bottom: 0;
left: 0;
......@@ -150,3 +169,4 @@
z-index: 99;
}
}
*/
src/components/navigation/menu-language/menu-language.tsx
+ 49
− 4
View file @ af16a6e6
......@@ -32,9 +32,18 @@ export class MenuLanguage {
this._labels = typeof data === 'string' ? JSON.parse(data) : data;
}
@Listen('languageMenuLeave') languageMenuLeave() {
console.log('leave');
this.isMenuOpen = false;
console.log(this.isMenuOpen);
}
@Listen('languageMenuToggle') languageMenuToggle() {
console.log('Toggle');
this.isMenuOpen = !this.isMenuOpen;
console.log(this.isMenuOpen);
/*
let hyHeader = this.el.closest('.hy-site-header');
let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
......@@ -47,19 +56,47 @@ export class MenuLanguage {
(hyBackdropDiv as HTMLElement).style.top = '0';
}
}
*/
}
@Listen('click')
handleComponentClick(event) {
console.log('Click');
this.isMenuOpen = !this.isMenuOpen;
console.log(this.isMenuOpen);
const languageMenuSelector = event.target as HTMLElement;
//alert(languageMenuSelector.tagName);
if (this.isMenuOpen) {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
const headerHeight = `${
languageMenuSelector.offsetHeight +
hyHeader.offsetTop +
hyHeader.offsetHeight +
8 -
languageMenuSelector.offsetTop -
languageMenuSelector.offsetHeight
}px`;
const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
`.menu--language__dropdown`
)[0] as HTMLElement;
languagePanel.style.top = headerHeight;
}
event.stopPropagation();
}
@Listen('click', {target: 'window'})
handleClick(event) {
/*
alert('window');
alert((event.target as HTMLTextAreaElement).tagName.toLowerCase());
if (this.isMenuOpen) {
const target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
console.log(targetElement);
*/
/*
if (targetElement !== 'hy-menu-language') {
const hyHeader = this.el.closest('.hy-site-header');
const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
......@@ -70,7 +107,8 @@ export class MenuLanguage {
this.isMenuOpen = !this.isMenuOpen;
}
}
}
*/
//}
event.stopPropagation();
}
......@@ -81,7 +119,6 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
const menuLanguageContainerClass = ['menu--language'].join(' ');
return this.isMobile ? (
<Host class={'menu--language'}>
......@@ -99,9 +136,17 @@ export class MenuLanguage {
})}
</Host>
) : (
<Host class={menuLanguageContainerClass}>
<Host
onMouseLeave={() => this.languageMenuLeave()}
class={{
'menu--language': true,
'menu--language__is-open': this.isMenuOpen,
}}
>
<button
onClick={() => this.languageMenuToggle()}
//onClick={() => this.languageMenuToggle()}
//onMouseOver={() => this.languageMenuToggle()}
//onFocus={() => this.languageMenuToggle()}
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 33
− 10
View file @ af16a6e6
......@@ -5,20 +5,29 @@
justify-content: center;
margin: 0 32px;
padding: 0;
height: 100%;
}
.hy-site-header {
&__menu-desktop {
height: 100%;
}
// ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop-container {
align-items: center;
display: flex;
flex-direction: row;
flex-flow: row;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
li {
display: flex;
height: 100%;
}
// First level menu items
.desktop-menu-link {
background-color: transparent;
......@@ -48,21 +57,21 @@
padding: 0 9px;
}
// Underline if link is in active trail.
&--is-active-trail::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
bottom: -12px;
content: ' ';
position: absolute;
right: 0;
width: 100%;
}
&__label {
position: relative;
width: min-content;
@include breakpoint($xlarge) {
width: 100%;
}
&--is-active-trail::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
bottom: -12px;
content: ' ';
position: absolute;
right: 0;
width: 100%;
}
}
hy-icon {
......@@ -100,6 +109,20 @@
}
}
}
.desktop-menu-link__label--is-active-trail::after {
border: none;
}
}
// Underline active link when showing menu panel
&--is-active::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
bottom: 0;
content: ' ';
position: absolute;
right: 0;
width: 100%;
}
}
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 16
− 17
View file @ af16a6e6
......@@ -50,23 +50,12 @@ 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) {
if (state === 'open') {
}
if (top == 0) {
}
/*
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
......@@ -81,6 +70,7 @@ export class HyDesktopMenuLinks {
hyBackdropDiv.style.top = '0';
}
}
*/
}
handleDesktopMenuClose() {
......@@ -148,6 +138,8 @@ export class HyDesktopMenuLinks {
const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
activeMenuItemSibling.style.paddingLeft = `${menuPanelLeftPosition}px`;
// @todo Position underline block under the activated top menu item.
// Position shortcuts block.
let shortcutsDiv = activeMenuItemSibling.querySelectorAll('ul.shortcuts-panel')[0] as HTMLElement; // shortcuts block
if (shortcutsDiv) {
......@@ -169,6 +161,8 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClick(id) {
console.log(id);
/*
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
const activeMenuItemSibling = activeMenuItem.nextElementSibling as HTMLElement; // current panel
......@@ -200,6 +194,7 @@ export class HyDesktopMenuLinks {
this.showBackdropShadow();
}
*/
}
componentDidLoad() {
......@@ -230,6 +225,10 @@ export class HyDesktopMenuLinks {
'desktop-menu-link',
isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
].join(' ');
let classAttributesLabel = [
'desktop-menu-link__label',
isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '',
].join(' ');
menuLinkItems.push(
<li>
......@@ -242,7 +241,7 @@ export class HyDesktopMenuLinks {
onFocus={() => this.handleDesktopMenuToggle(id)}
aria-expanded="false"
>
<span class="desktop-menu-link__label">{label}</span>
<span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
......
src/components/site-header/site-header.scss
+ 13
− 12
View file @ af16a6e6
......@@ -141,31 +141,32 @@
}
.menu--secondary {
height: 100%;
@include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
margin-right: 0;
}
@include breakpoint($extrawide) {
margin-right: 32px;
}
&__item {
&__item {
margin: 0 10px;
padding: 10px 0;
@include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
margin: 0 10px;
padding: 10px 0;
}
}
@include breakpoint($extrawide) {
margin-right: 32px;
&__item {
@include breakpoint($extrawide) {
margin: 0 6px;
padding: 10px 0;
}
}
@include breakpoint($xlarge) {
&__item {
@include breakpoint($xlarge) {
margin: 0 8px;
padding: 10px 0;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment