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

desktop nav styles

parent 2c77a9f2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 273
− 57
View file @ 2814d9b7
......@@ -3,14 +3,286 @@
}
.hy-site-header {
// nav
&__menu-desktop {
}
// ul
&__menu-desktop-container {
align-items: center;
display: flex;
flex-flow: row;
list-style: none;
width: 100%;
// First level menu items
.desktop-menu-link {
background-color: transparent;
border: none;
color: var(--brand-main-nearly-black);
cursor: pointer;
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
@include font-size(15px, 16px);
@include font-weight($bold);
border-top: 0 none;
padding: 10px 8px;
text-transform: uppercase;
}
@include breakpoint($fullhd) {
@include font-size(18px, 16px);
letter-spacing: -0.5px;
padding: 10px;
}
&__heading__icon {
display: none;
}
&--is-active-trail {
@include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding-bottom: 8px;
}
@include breakpoint($overwide) {
padding-bottom: 12px;
}
}
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
position: relative;
.desktop-menu-link__heading__icon {
bottom: 14px;
display: block;
left: 0;
position: absolute;
width: 100%;
hy-icon {
justify-content: center;
transform: rotateX(180deg);
svg {
padding: 4px 0;
}
}
}
}
}
// Panel with second level menu items and shortcuts.
.hy-desktop-menu-panel {
display: none;
&--is-active {
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
justify-content: center;
opacity: 1;
position: absolute;
left: 0;
top: 104px;
width: 100%;
z-index: 510;
}
&__panel-toggle {
background-color: transparent;
border: none;
position: absolute;
right: 10px;
top: 10px;
&__label {
@include font-size(18px, 22px);
@include font-weight($bold);
color: var(--grayscale-black);
display: flex;
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
&__title {
padding-right: 5px;
}
}
}
&__desktop-menu {
position: relative;
// first level link inside panel
a.menu-item-first-level-link {
@include font-weight($bold);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
background-color: var(--grayscale-background-box);
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding: 17px 32px 12px 32px;
position: relative;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
padding-top: 19px;
}
.hy-menu-item__label {
border: none;
margin-left: 14px;
}
.hy-menu-item__description {
@include font-size(16px, 24px);
@include font-weight($semibold);
color: var(--grayscale-dark);
letter-spacing: 0;
margin-left: 14px;
margin-bottom: 28px;
}
span.heading-icon-first {
position: absolute;
top: 12px;
left: -6px;
@include breakpoint($fullhd) {
top: 27px;
}
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
padding: 8px;
}
}
}
// menu item links
ul.desktop-menu {
background-color: var(--grayscale-background-box);
list-style: none;
margin: 0;
padding: 0;
li {
a {
@include font-weight($bold);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
align-items: center;
flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(18px, 22px);
letter-spacing: -0.56px;
}
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
border: none;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
}
}
span.heading-icon-second {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
}
}
}
}
}
}
}
// Shortcuts
.shortcuts-panel {
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
//border-bottom: 1px solid var(--grayscale-medium-dark);
color: var(--grayscale-black);
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
}
&__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark);
&__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
a {
@include font-size(16px, 22px);
@include font-weight($semibold);
color: var(--grayscale-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
letter-spacing: -0.5px;
padding: 19px 0;
text-decoration: none;
}
span.shortcut-item__icon {
position: absolute;
right: 0;
svg {
padding: 4px;
}
}
}
}
}
}
/*
.hy-site-header {
&__menu-desktop {
.desktop-menu-link {
color: var(--brand-main-nearly-black);
......@@ -207,62 +479,6 @@
}
}
}
ul.second {
background-color: var(--grayscale-background-box);
}
ul.desktop-menu {
display: none;
&--is-active {
display: block;
}
}
}
&__panel-toggle {
position: absolute;
right: 10px;
top: 10px;
}
.shortcuts-panel {
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
//border-bottom: 1px solid var(--grayscale-medium-dark);
color: var(--grayscale-black);
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
}
&__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark);
&__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
a {
@include font-size(16px, 22px);
@include font-weight($semibold);
color: var(--grayscale-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
letter-spacing: -0.5px;
padding: 19px 0;
text-decoration: none;
}
span.shortcut-item__icon {
position: absolute;
right: 0;
svg {
padding: 4px;
}
}
}
}
}
*/
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 13
− 7
View file @ 2814d9b7
......@@ -61,10 +61,12 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuToggle(id) {
console.log(id);
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
const activeMenuItemSibling = activeMenuItem.nextElementSibling;
const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
......@@ -101,7 +103,7 @@ export class HyDesktopMenuLinks {
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}>
<div class="hy-desktop-menu-panel__desktop-menu">
<a aria-current={label} href={url} class="" menu-link-id={id}>
<a aria-current={label} href={url} class="menu-item-first-level-link" menu-link-id={id}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
......@@ -109,10 +111,14 @@ export class HyDesktopMenuLinks {
<span class="hy-menu-item__description">{description}</span>
</a>
<ul class={'desktop-menu first'} menu-link-id={id}>
{items.map(({label, url, description}) => (
{items.map(({label, url}) => (
<li>
<a href={url}>{label}</a>
<span>{description}</span>
<a href={url}>
<span class="heading-icon-second">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="hy-menu-item__label">{label}</span>
</a>
</li>
))}
</ul>
......@@ -155,7 +161,7 @@ export class HyDesktopMenuLinks {
aria-label="close"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE
<span class="hy-desktop-menu-panel__panel-toggle__label__title">CLOSE</span>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
......
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