Merge branch 'NXSTAGE-1493-header' of...

Merge branch 'NXSTAGE-1493-header' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1493-header
pull latest & merging

src/components.d.ts

@@ -2019,6 +2019,7 @@ declare namespace LocalJSX {
     isMobile?: boolean;
     logoLabel?: string;
     logoUrl?: string;
+    onMobileMenuTopToggle?: (event: CustomEvent<any>) => void;
     onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
     siteLabel?: string;
     siteUrl?: string;
@@ -2185,6 +2186,7 @@ declare namespace LocalJSX {
     onHeaderScrollDown?: (event: CustomEvent<any>) => void;
     onHeaderScrollUp?: (event: CustomEvent<any>) => void;
     onMenuMobileToggled?: (event: CustomEvent<any>) => void;
+    onMenuMobileTopToggled?: (event: CustomEvent<any>) => void;
     siteLabel?: string;
     siteUrl?: string;
   }

src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss

@@ -275,7 +275,7 @@
   display: flex;
   flex-direction: column;
   justify-items: space-between;
-  max-width: 350px;
+  max-width: 400px;
   overflow: hidden;
   padding: 0px;
   place-items: stretch;

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -33,6 +33,7 @@ export class HyMenuMainGroup {
   @State() isMenuOpen: boolean = false;
 
   @Event() universityMainMenuToggled: EventEmitter;
+  @Event() mobileMenuTopToggle: EventEmitter;
 
   private _dataMainMenu: MainMenu[];
 
@@ -43,6 +44,7 @@ export class HyMenuMainGroup {
 
   @Listen('click')
   handleComponentClick(event) {
+    this.mobileMenuTopToggle.emit();
     this.isMenuOpen = !this.isMenuOpen;
 
     if (this.isMenuOpen) {

src/components/navigation/hy-menu-main-group/readme.md

@@ -18,6 +18,7 @@
 
 | Event                       | Description | Type               |
 | --------------------------- | ----------- | ------------------ |
+| `mobileMenuTopToggle`       |             | `CustomEvent<any>` |
 | `universityMainMenuToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies

src/components/site-header/readme.md

@@ -25,11 +25,12 @@
 
 ## Events
 
-| Event               | Description | Type               |
-| ------------------- | ----------- | ------------------ |
-| `headerScrollDown`  |             | `CustomEvent<any>` |
-| `headerScrollUp`    |             | `CustomEvent<any>` |
-| `menuMobileToggled` |             | `CustomEvent<any>` |
+| Event                  | Description | Type               |
+| ---------------------- | ----------- | ------------------ |
+| `headerScrollDown`     |             | `CustomEvent<any>` |
+| `headerScrollUp`       |             | `CustomEvent<any>` |
+| `menuMobileToggled`    |             | `CustomEvent<any>` |
+| `menuMobileTopToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies
 

src/components/site-header/site-header.tsx

@@ -52,6 +52,7 @@ export class SiteHeader {
   @Event() headerScrollUp: EventEmitter;
   @Event() headerScrollDown: EventEmitter;
   @Event() menuMobileToggled: EventEmitter;
+  @Event() menuMobileTopToggled: EventEmitter;
 
   private ro: ResizeObserver;
   private donateLink: DonateLink[];
@@ -71,6 +72,12 @@ export class SiteHeader {
     this.menuMobileToggled.emit();
   }
 
+  // Listener for toggling mobile menu top panel on or off.
+  @Listen('mobileMenuTopToggle') mobileMenuTopToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+    this.menuMobileTopToggled.emit();
+  }
+
   @Listen('scroll', {target: 'window'})
   handleScroll() {
     if (this.el.getAttribute('menu-type') === 'desktop') {
@@ -221,7 +228,6 @@ export class SiteHeader {
     const logoColor = ColorVariant.black;
     const logoColorGroup = ColorVariant.white;
     let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
-
     switch (this.menuType) {
       case MenuType.desktop:
         // Larger than 1200px screens