More mobile related things, work in progress

src/components.d.ts

@@ -629,6 +629,11 @@ export namespace Components {
   interface HyMenuMainGroup {
     dataMainMenu: MainMenu[] | string;
     isMobile: boolean;
+    logoLabelGroup?: string;
+    logoSizeGroup?: any;
+    logoUrlGroup?: string;
+    siteLabel?: string;
+    siteUrl?: string;
   }
   interface HyMenuMobileBreadcrumb {
     bid: string;
@@ -2009,6 +2014,11 @@ declare namespace LocalJSX {
   interface HyMenuMainGroup {
     dataMainMenu?: MainMenu[] | string;
     isMobile?: boolean;
+    logoLabelGroup?: string;
+    logoSizeGroup?: any;
+    logoUrlGroup?: string;
+    siteLabel?: string;
+    siteUrl?: string;
   }
   interface HyMenuMobileBreadcrumb {
     bid?: string;

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

@@ -96,6 +96,7 @@
   display: flex;
   flex-flow: row;
   margin-left: 28px;
+  position: relative;
 
   @include breakpoint($narrow) {
     margin-left: 32px;
@@ -110,3 +111,48 @@
   background: transparent;
   padding: 15px 28px 15px 15px;
 }
+
+.menu--main-group__dropdown__top {
+}
+
+.menu--main-group__dropdown__items {
+}
+
+.menu--main-group__dropdown__donate {
+}
+
+.menu--main-group__dropdown--mobile {
+  place-items: stretch;
+  //inset: 0px;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  justify-items: space-between;
+  background-color: var(--grayscale-black);
+  bottom: 0px;
+  overflow: hidden;
+  padding: 0px;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  transform: translateX(100%);
+  transition: all 0.3s ease 0s;
+  visibility: hidden;
+  width: 0px;
+
+  &.is-open {
+    padding: 20px;
+    transform: translateX(0px);
+    visibility: visible;
+    width: 90%;
+    z-index: 100;
+    padding-top: 50px;
+    transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
+
+    &::after {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

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

@@ -5,6 +5,8 @@ export interface MainMenu {
 }
 
 import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
+import {DonateLink} from '../../site-header/site-header';
 
 @Component({
   tag: 'hy-menu-main-group',
@@ -15,7 +17,13 @@ export class HyMenuMainGroup {
   @Element() el: HTMLElement;
   @Prop() dataMainMenu: MainMenu[] | string;
   @Prop() isMobile: boolean = false;
+  @Prop() logoUrlGroup?: string;
+  @Prop() logoSizeGroup?: any;
+  @Prop() logoLabelGroup?: string;
+  @Prop() siteLabel?: string;
+  @Prop() siteUrl?: string;
   @State() isMenuOpen: boolean = false;
+  private donateLink: DonateLink[];
 
   private _dataMainMenu: MainMenu[];
 
@@ -56,6 +64,8 @@ export class HyMenuMainGroup {
 
   render() {
     const white = 'var(--grayscale-white)';
+    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+    const logoColorGroup = ColorVariant.white;
 
     return this.isMobile ? (
       <Host
@@ -74,12 +84,25 @@ export class HyMenuMainGroup {
         </button>
         <nav
           role="navigation"
+          aria-hidden={this.isMenuOpen ? 'false' : 'true'}
           class={{
             'menu--main-group__dropdown--mobile': true,
             'is-open': this.isMenuOpen,
           }}
         >
-          <div class="list">
+          <div class="menu--main-group__dropdown__top">
+            <hy-site-logo
+              is-group={true}
+              size={logoSizeGroup}
+              color={logoColorGroup}
+              url={this.siteUrl}
+              label={this.siteLabel}
+            />
+            <button class="menu--main-group__dropdown__close" onClick={() => this.isMenuOpen == false}>
+              CLOSE ME
+            </button>
+          </div>
+          <div class="menu--main-group__dropdown__items">
             {this._dataMainMenu.map((item) => {
               return (
                 <a href={item.url} class={{'menu-main-link': true}}>
@@ -91,6 +114,16 @@ export class HyMenuMainGroup {
               );
             })}
           </div>
+          <div class="menu--main-group__dropdown__donate">
+            {this.donateLink.map((i) => {
+              return (
+                <a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
+                  <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+                  <span class={'hy-link__donate__label group'}>{i.label}</span>
+                </a>
+              );
+            })}
+          </div>
         </nav>
       </Host>
     ) : (

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

@@ -4,10 +4,15 @@
 
 ## Properties
 
-| Property       | Attribute        | Description | Type                   | Default     |
-| -------------- | ---------------- | ----------- | ---------------------- | ----------- |
-| `dataMainMenu` | `data-main-menu` |             | `MainMenu[] \| string` | `undefined` |
-| `isMobile`     | `is-mobile`      |             | `boolean`              | `false`     |
+| Property         | Attribute          | Description | Type                   | Default     |
+| ---------------- | ------------------ | ----------- | ---------------------- | ----------- |
+| `dataMainMenu`   | `data-main-menu`   |             | `MainMenu[] \| string` | `undefined` |
+| `isMobile`       | `is-mobile`        |             | `boolean`              | `false`     |
+| `logoLabelGroup` | `logo-label-group` |             | `string`               | `undefined` |
+| `logoSizeGroup`  | `logo-size-group`  |             | `any`                  | `undefined` |
+| `logoUrlGroup`   | `logo-url-group`   |             | `string`               | `undefined` |
+| `siteLabel`      | `site-label`       |             | `string`               | `undefined` |
+| `siteUrl`        | `site-url`         |             | `string`               | `undefined` |
 
 ## Dependencies
 
@@ -18,12 +23,15 @@
 ### Depends on
 
 - [hy-icon](../../icon)
+- [hy-site-logo](../../site-header/site-logo)
 
 ### Graph
 
 ```mermaid
 graph TD;
   hy-menu-main-group --> hy-icon
+  hy-menu-main-group --> hy-site-logo
+  hy-site-logo --> hy-icon
   hy-site-header --> hy-menu-main-group
   style hy-menu-main-group fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/site-header/readme.md

@@ -54,6 +54,7 @@ graph TD;
   hy-site-header --> hy-desktop-menu-links
   hy-site-logo --> hy-icon
   hy-menu-main-group --> hy-icon
+  hy-menu-main-group --> hy-site-logo
   hy-menu-language --> hy-menu-language-item
   hy-menu-language --> hy-icon
   hy-site-search --> hy-icon

src/components/site-header/site-logo/readme.md

@@ -19,6 +19,7 @@
 
 - [hy-footer-base](../../footer/hy-footer-base)
 - [hy-menu](../../navigation/menu)
+- [hy-menu-main-group](../../navigation/hy-menu-main-group)
 - [hy-menu-sidebar](../../navigation/menu-sidebar)
 - [hy-site-header](..)
 - [hy-user-login-form](../../hy-user-login-form)
@@ -34,6 +35,7 @@ graph TD;
   hy-site-logo --> hy-icon
   hy-footer-base --> hy-site-logo
   hy-menu --> hy-site-logo
+  hy-menu-main-group --> hy-site-logo
   hy-menu-sidebar --> hy-site-logo
   hy-site-header --> hy-site-logo
   hy-user-login-form --> hy-site-logo