Merge branch 'NXSTAGE-1578-Group_header_and_nav_fixes' into 'development'

NXSTAGE-1578: Group header fixes

See merge request julkiset-sivut/design-system-lib!178

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);

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,
             }}

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;
+  }
+}

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,

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

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);
-      }
-    }
   }
 }
 

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={{

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 {