Merge branch 'NXSTAGE-1002-mobile-menu-fixes' into 'development'

NXSTAGE-1002: Mobile menu fixes

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

src/components/navigation/menu-item/menu-item.scss

@@ -65,12 +65,13 @@
 
 :host(.hy-menu-item) {
   a {
-    @include font-size(15px, 20px);
+    @include font-size(16px, 20px);
     @include font-weight($regular);
     align-items: center;
     color: var(--brand-main-nearly-black);
     display: flex;
     font-family: var(--main-font-family);
+    letter-spacing: -0.5px;
     padding: 24px 16px;
     text-decoration: none;
     width: 100%;
@@ -83,10 +84,9 @@
     &.hy-menu-item--mobile {
       background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
       color: var(--brand-main-light);
-      padding: 12px 12px 12px 20px;
+      padding: 14px 12px 14px 20px;
 
-      &.is-active,
-      &.in-active-trail {
+      &.is-active {
         @include font-weight($bold);
         color: var(--grayscale-black);
         position: relative;
@@ -217,7 +217,7 @@
   align-items: center;
   background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
   border-bottom: 0;
-  border-left: 1px dashed var(--brand-main-light);
+  border-left: 1px dotted var(--brand-main-light);
   border-right: 0;
   border-top: 0;
   cursor: pointer;

src/components/navigation/menu-item/menu-item.tsx

@@ -212,7 +212,7 @@ export class MenuItem {
                 onClick={() => this.handleClick()}
                 class={'hy-menu-item__button'}
               >
-                <hy-icon icon={'hy-icon-caret-right'} size={12} />
+                <hy-icon icon={'hy-icon-caret-right'} size={14} />
               </button>
             )}
 

src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss

@@ -21,11 +21,12 @@
   }
 
   &__label {
-    @include font-size(14px, 20px);
+    @include font-size(16px, 20px);
     @include font-weight($regular);
     align-items: center;
     color: var(--brand-main-light);
     display: flex;
+    letter-spacing: -0.5px;
     margin-left: 6px;
     text-align: left;
 

src/components/navigation/menu/menu.scss

@@ -33,13 +33,17 @@
   }
 }
 
+.hy-menu-container--mobile {
+  min-height: calc(100vh - 60px);
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding-top: 32px;
+}
+
 .hy-menu {
   &--mobile {
     -webkit-overflow-scrolling: touch;
     flex-flow: column;
-    min-height: calc(100vh - 60px);
-    overflow-x: hidden;
-    overflow-y: visible;
     padding-left: 12px;
     padding-right: 12px;
     transform: translateX(100%);
@@ -73,8 +77,10 @@
   }
 
   &__logo-container {
+    box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
     display: inline-block;
     padding: 16px;
+    z-index: 100;
 
     @include breakpoint($narrow) {
       padding: 16px 28px;

src/components/navigation/menu/menu.tsx

@@ -133,38 +133,40 @@ export class Menu {
                 label={this.logoLabel}
               />
             </div>
-            <div
-              id={'menu-bc-container'}
-              class={{
-                'hy-menu__breadcrumbs': true,
-                'is-empty': this.breadcrumbs.length === 0,
-              }}
-            >
-              <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
-              {this.breadcrumbs.length
-                ? this.breadcrumbs.map((breadcrumb, index) => {
-                    return (
-                      <hy-menu-mobile-breadcrumb
-                        label-back={this.menuButtonBreadcrumbReturn}
-                        label-front-page={this.labelFrontPage}
-                        label={breadcrumb.label}
-                        bid={breadcrumb.bid}
-                        is-first={index === 0}
-                      />
-                    );
-                  })
-                : ''}
-            </div>
-            <div
-              aria-hidden={this.menuIsOpen ? 'false' : 'true'}
-              class={{
-                'hy-menu': true,
-                'hy-menu--mobile': true,
-                'is-open': this.menuIsOpen,
-                'is-demo': this.isDemo,
-              }}
-            >
-              <slot />
+            <div class="hy-menu-container--mobile">
+              <div
+                id={'menu-bc-container'}
+                class={{
+                  'hy-menu__breadcrumbs': true,
+                  'is-empty': this.breadcrumbs.length === 0,
+                }}
+              >
+                <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
+                {this.breadcrumbs.length
+                  ? this.breadcrumbs.map((breadcrumb, index) => {
+                      return (
+                        <hy-menu-mobile-breadcrumb
+                          label-back={this.menuButtonBreadcrumbReturn}
+                          label-front-page={this.labelFrontPage}
+                          label={breadcrumb.label}
+                          bid={breadcrumb.bid}
+                          is-first={index === 0}
+                        />
+                      );
+                    })
+                  : ''}
+              </div>
+              <div
+                aria-hidden={this.menuIsOpen ? 'false' : 'true'}
+                class={{
+                  'hy-menu': true,
+                  'hy-menu--mobile': true,
+                  'is-open': this.menuIsOpen,
+                  'is-demo': this.isDemo,
+                }}
+              >
+                <slot />
+              </div>
             </div>
             <div class={'hy-link__donate'}>
               {this.donateLink

src/components/site-header/site-header.scss

@@ -55,7 +55,7 @@
     bottom: 0;
     overflow: hidden;
     padding: 0;
-    position: absolute;
+    position: fixed;
     right: 0;
     top: 0;
     transform: translateX(100%);
@@ -86,7 +86,7 @@
     }
 
     &.is-open {
-      position: absolute;
+      position: fixed;
       right: 0;
       top: 32px;
       transform: translateY(-50%);
@@ -127,7 +127,7 @@
 .hy-backdrop {
   bottom: 0;
   left: 0;
-  position: absolute;
+  position: fixed;
   right: 0;
   top: 0;
   visibility: hidden;