diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index 1dd2531e580925eb8b77d229c49f9bf4dd18c92b..1df045b4c35f4307e593edfc04011d0675a1dd2c 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -73,8 +73,13 @@
.toggle__close {
@include breakpoint($wide) {
- height: 12px;
- width: 12px;
+ height: 15px;
+ width: 15px;
+
+ svg {
+ height: 15px;
+ width: 15px;
+ }
}
}
@@ -110,6 +115,7 @@
display: flex;
flex-flow: column;
justify-items: center;
+ padding-top: 14px;
position: relative;
}
@@ -158,6 +164,10 @@
margin-bottom: 20px;
text-decoration: none;
+ @include breakpoint($extrawide) {
+ @include font-size(14px, 18px);
+ }
+
&:hover {
span {
color: var(--grayscale-medium);
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 216984d762a7a4a09ae13846714bd7a1adf9f01f..a5f9cbc498919a773ebaff44e01868eacb3fa79b 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -47,10 +47,11 @@ export class HyMenuMainGroup {
handleComponentClick(event) {
event.preventDefault();
event.stopPropagation();
+ this.emitEvent();
+
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
- this.emitEvent();
this.adjustMainMenuPosition(event.target);
}
}
@@ -92,29 +93,48 @@ export class HyMenuMainGroup {
mainMenuList.style.left = `${rectMenuToggle.left}px`;
}
+ let headerHeight = hyTopHeader.offsetHeight + 270;
+
+ this.showBackdropShadow('open', headerHeight);
}
}
- componentWillRender() {
- this.dataMainMenuWatcher(this.dataMainMenu);
+ showBackdropShadow(state = 'close', top = 0) {
+ let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
+
+ if (hyBackdropDiv) {
+ if (state === 'open') {
+ let me = window.outerHeight - top;
+ hyBackdropDiv.style.height = `${me}px`;
+ hyBackdropDiv.style.top = `${top}px`;
+ hyBackdropDiv.style.position = 'absolute';
+ hyBackdropDiv.classList.add('is-active');
+ } else {
+ hyBackdropDiv.removeAttribute('style');
+ hyBackdropDiv.classList.remove('is-active');
+ }
+ }
}
- handleMainMenuClose(event) {
- this.isMenuOpen = false;
- event.stopPropagation();
+ componentWillRender() {
+ this.dataMainMenuWatcher(this.dataMainMenu);
}
handleTopMenuClose(event) {
this.isMenuOpen = false;
this.mobileMenuTopToggle.emit();
+
event.stopPropagation();
}
// Close the University main menu if user clicks anywhere outside the component.
@Listen('click', {target: 'window'})
handleOutsideMenuClick(event) {
- this.isMenuOpen = false;
- this.handleTopMenuClose(event);
+ if (this.isMenuOpen) {
+ this.isMenuOpen = false;
+ this.handleTopMenuClose(event);
+ }
event.stopPropagation();
}
@@ -245,7 +265,7 @@ export class HyMenuMainGroup {
})}
</div>
<button
- onClick={(e) => this.handleMainMenuClose(e)}
+ onClick={(e) => this.handleComponentClick(e)}
class={{
'panel-toggle': true,
}}
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 861612cb64b1efe9cebf56ae0fbe5a43afb93cd9..057b8a18e665131bc103d29aace22faa226ae13e 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -143,3 +143,10 @@
}
}
}
+
+// Bit hacky, but easy way to hide hy-logo on group menu in mobile
+.hy-menu-wrapper--mobile[data-is-group] {
+ .hy-menu__logo-container .hy-site-logo .hy-site-logo__icon {
+ width: 0 !important;
+ }
+}
diff --git a/src/components/navigation/menu/menu.tsx b/src/components/navigation/menu/menu.tsx
index 02834d7a404decc72ca4ce211bd77e42c2afbc8e..aa9a613a55cf4a26de2417a2285cb424cc884fcb 100644
--- a/src/components/navigation/menu/menu.tsx
+++ b/src/components/navigation/menu/menu.tsx
@@ -124,6 +124,7 @@ export class Menu {
case MenuType.mobile:
return (
<nav
+ data-is-group={this.isGroup}
role={'navigation'}
class={{
'hy-menu-wrapper--mobile': true,
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 dd4bdca7935cbecb7e5e59e24ab541421143b99b..d70cc66a392e4a23aa8f2051671722901118f69d 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
@@ -70,7 +70,6 @@ export class HyDesktopMenuLinks {
showBackdropShadow(state = 'close', top = 0) {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
-
if (!hyHeader) return;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -410,7 +409,6 @@ export class HyDesktopMenuLinks {
let target = isExternal ? '_blank' : '_self';
if (toggleOff == 'true') {
- //console.log('toggleOff if true: show as a link: ' + label);
menuLinkItems.push(
<li onMouseEnter={(e) => this.handleDesktopMenuClose(e)}>
<a aria-current={label} href={url} target={target} class="desktop-menu-link toggle" menu-link-id={id}>
@@ -419,7 +417,6 @@ export class HyDesktopMenuLinks {
</li>
);
} else {
- //console.log('toggleOff is false: show as a dropdown: ' + label);
menuLinkItems.push(
<li>
<button
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 2b45413d0a4bdb7556919df221dfbe0ea293c23c..a9461947c1fa45b2026bf867b1d767eaf5d3b506 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -58,6 +58,14 @@
// Group menus on group pages
&.group {
@include breakpoint($narrow) {
+ min-height: 64px;
+ }
+
+ @include breakpoint($medium) {
+ min-height: 80px;
+ }
+
+ @include breakpoint($extrawide) {
justify-content: flex-start;
}
}
@@ -71,11 +79,7 @@
flex-flow: row;
place-content: center space-between;
position: relative;
- z-index: 99;
-
- &.is-open {
- z-index: 98;
- }
+ max-height: 48px;
@include breakpoint($narrow) {
margin: 0 auto;
@@ -113,18 +117,7 @@
margin: 16px 24px;
}
@include breakpoint($extrawide) {
- margin: 16px;
- }
-
- &:hover {
- color: var(--brand-main);
- a,
- span {
- color: var(--brand-main) !important;
- }
- svg {
- fill: var(--brand-main);
- }
+ margin: 16px 32px;
}
&.group {
@@ -145,17 +138,6 @@
@include breakpoint($xlarge) {
margin: 8px 32px;
}
-
- &:hover {
- color: var(--grayscale-medium);
- a,
- span {
- color: var(--grayscale-medium) !important;
- }
- svg {
- fill: var(--grayscale-medium);
- }
- }
}
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 00a9d94bddbb4c393cc27cf1a988f5f005cb60b5..42c02d4bdebefcf45c2ded98be015bce72121385 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -258,7 +258,7 @@ export class SiteHeader {
// Larger than 1200px screens
return [
<header class={classAttributes.join(' ')}>
- <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
+ <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen || this.isTopMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '} role="navigation">
@@ -358,8 +358,8 @@ export class SiteHeader {
<div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '} role="navigation">
<hy-site-logo
- is-group={true}
- size={logoSizeGroup}
+ is-group={'true'}
+ size={logoSize}
color={logoColorGroup}
url={this.siteUrl}
label={this.siteLabel}
@@ -400,7 +400,7 @@ export class SiteHeader {
</div>
</div>
)}
- <div class="hy-site-header__content">
+ <div class={{'hy-site-header__content': true, group: this.isGroup}}>
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
<a class={'group'} href={this.logoUrl}>
@@ -487,7 +487,13 @@ export class SiteHeader {
{this.isGroup && (
<div class={{'hy-site-header__content-top': true, 'is-open': this.isTopMenuOpen}} is-mobile={true}>
<div class={'hy-site-header__logo-container group '}>
- <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
+ <hy-site-logo
+ is-group={true}
+ size={logoSizeGroup}
+ color={logoColorGroup}
+ url={this.siteUrl}
+ label={this.siteLabel}
+ />
</div>
<div class={'menu--secondary menu--secondary--group'}>
@@ -513,7 +519,7 @@ export class SiteHeader {
</div>
</div>
)}
- <div class="hy-site-header__content">
+ <div class={{'hy-site-header__content': true, group: this.isGroup}}>
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
<a class={'group'} href={this.logoUrl}>
@@ -536,6 +542,14 @@ export class SiteHeader {
search-tools={this.dataSearchTools}
/>
)}
+ <span
+ class={{
+ 'hy-site-header__menu-label': true,
+ 'is-visible': this.isMenuOpen,
+ }}
+ >
+ {this.menuLabel}
+ </span>
<button
onClick={() => toggleMenuMobileAndRemoveListener()}
class={{
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index a1cc0345c5938a04ce495f3b2654bbac5168e752..2affe631ccf0251a2d7e50e79e6853e5feb05695 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -71,7 +71,14 @@
}
&__icon {
- svg {
+ &.group {
+ svg {
+ height: 32px !important;
+ width: 33.41px;
+ }
+ }
+
+ &:not(.group) svg {
height: 32px;
width: 33.41px;
@@ -85,13 +92,6 @@
width: 64px;
}
}
-
- &.group {
- svg {
- height: 32px;
- width: 34px;
- }
- }
}
&__header {