fix(navigation): adjust mobile behaviour

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,24 +2,12 @@ Closes #
 
 {{short description}}
 
-## Changelog
-
-**New**
-
-- {{new thing}}
-
-**Changed**
-
-- {{change thing}}
-
-**Removed**
-
-- {{removed thing}}
-
 ## Acceptance Criteria
 
 - [ ] Design Review by @Gagne87, @clastzoo
 - [ ] Technical Review by @hirsch88, @mladenplaninicic, @nobilo
+- [ ] Visual test done by @hirsch88, @nobilo, @mladenplaninicic, @Gagne87, @clastzoo
+- [ ] Functional test done by @hirsch88, @nobilo, @mladenplaninicic
 - Browser Testing by @hirsch88, @nobilo, @mladenplaninicic, @Gagne87, @clastzoo
     - Desktop
         - [ ] Chrome

packages/components/src/components.d.ts

@@ -2191,7 +2191,7 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Defines the layout of the tabs.
+          * Defines the layout of the tabs. Right only works from the breakpoint high-definition and beyond.
          */
         "float": Props.BalTabsFloat;
         /**
@@ -5688,7 +5688,7 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Defines the layout of the tabs.
+          * Defines the layout of the tabs. Right only works from the breakpoint high-definition and beyond.
          */
         "float"?: Props.BalTabsFloat;
         /**

packages/components/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx

@@ -12,6 +12,7 @@ export class ListItemAccordionHead {
    * If `true` the list accordion is open
    */
   @Prop() accordionOpen = false
+
   /**
    * Icon name string with value 'plus' on default
    */
@@ -34,7 +35,7 @@ export class ListItemAccordionHead {
     return this.el.closest('bal-list-item')
   }
 
-  clickHandler() {
+  private onClick = () => {
     const listItem = this.getClosestListItem()
     if (listItem) {
       this.accordionOpen = !this.accordionOpen
@@ -49,7 +50,7 @@ export class ListItemAccordionHead {
           'bal-list-item-accordion-head bal-list-item': true,
           'is-open': this.accordionOpen,
         }}
-        onClick={() => this.clickHandler()}
+        onClick={this.onClick}
       >
         <slot></slot>
         <bal-list-item-icon right>

packages/components/src/components/bal-list/bal-list-item/bal-list-item.tsx

@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core'
+import { stopEventBubbling } from '../../../helpers/form-input.helpers'
 import { Props } from '../../../types'
 
 @Component({
@@ -139,6 +140,10 @@ export class ListItem {
             'is-disabled': this.disabled,
             'is-sub-accordion-item': this.subAccordionItem,
           }}
+          onClick={(event: MouseEvent) => {
+            stopEventBubbling(event)
+            this.balNavigate.emit(event)
+          }}
         >
           <div>
             <slot></slot>

packages/components/src/components/bal-logo/bal-logo.sass

@@ -8,7 +8,8 @@
   & > div
     height: 1.25rem
   +modifier('animated')
-    margin-left: -7px
+    +desktop
+      margin-left: -7px
   +modifier('white')
     +fillSvg($white)
   +desktop

packages/components/src/components/bal-navbar/bal-navbar.sass

@@ -124,6 +124,7 @@
   // Styling for light (white) background
   +modifiers(is-light)
     background-color: var(--bal-color-white)
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
     .bal-navbar__brand__title
       color: var(--bal-color-primary)
     bal-logo

packages/components/src/components/bal-navbar/stories/bal-navbar.stories.ts

@@ -28,7 +28,7 @@ const component = BalComponentStory({
   docs,
   args: {
     expanded: false,
-    light: true,
+    light: false,
   },
 })
 
@@ -255,7 +255,7 @@ export const Light = args => ({
   <bal-navbar-menu>
     <bal-navbar-menu-end>
       <bal-popover v-model="isActive">
-        <bal-button bal-popover-trigger :square="square" color="light" icon="web" inverted @click="toggle()">
+        <bal-button bal-popover-trigger :square="square" color="light" icon="web" @click="toggle()">
           <span class="is-hidden-mobile">DE</span>
         </bal-button>
         <bal-popover-content class="p-2">

packages/components/src/components/bal-navigation/bal-navigation-meta/bal-navigation-meta.tsx

@@ -19,7 +19,7 @@ export class NavigationMeta implements ComponentInterface {
           ...metaEl.class(),
         }}
       >
-        <nav class="container is-wide" role="navigation" aria-label={this.ariaLabelMeta}>
+        <nav class="container" role="navigation" aria-label={this.ariaLabelMeta}>
           <slot></slot>
         </nav>
       </Host>

packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx

@@ -1,6 +1,8 @@
 import { Component, h, ComponentInterface, Host, Prop, State } from '@stencil/core'
+import { stopEventBubbling } from '../../../helpers/form-input.helpers'
 import { Props } from '../../../types'
 import { BEM } from '../../../utils/bem'
+import { disableSmoothScrolling, enableSmoothScrolling } from '../../../utils/toggle-scrolling-body'
 
 @Component({
   tag: 'bal-navigation-popover',
@@ -101,6 +103,35 @@ export class NavigationPopover implements ComponentInterface {
    */
   @Prop() mobileTop = false
 
+  private scrollToTopTimer?: NodeJS.Timer
+  private setActiveTimer?: NodeJS.Timer
+
+  private clearTimeouts() {
+    if (this.scrollToTopTimer) {
+      clearTimeout(this.scrollToTopTimer)
+    }
+
+    if (this.setActiveTimer) {
+      clearTimeout(this.setActiveTimer)
+    }
+  }
+
+  private toggle = (event: Event) => {
+    stopEventBubbling(event)
+    this.clearTimeouts()
+
+    if (!this.isActive) {
+      disableSmoothScrolling()
+      this.scrollToTopTimer = setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 0)
+    }
+    this.setActiveTimer = setTimeout(() => {
+      enableSmoothScrolling()
+      this.isActive = !this.isActive
+    }, 100)
+  }
+
   render() {
     const navPopoverEl = BEM.block('nav').element('popover')
 
@@ -127,7 +158,7 @@ export class NavigationPopover implements ComponentInterface {
             inverted={this.inverted}
             color={this.isActive ? this.activeColor : this.inactiveColor}
             square={this.square}
-            onClick={() => (this.isActive = !this.isActive)}
+            onClick={this.toggle}
             aria-haspopup="true"
             class={`bal-navigation-popover__button bal-navigation-popover__button-${
               this.isActive ? this.activeColor : this.inactiveColor

packages/components/src/components/bal-navigation/bal-navigation.sass

@@ -37,7 +37,6 @@
       flex-grow: 1
       align-items: center
       gap: .5rem
-      // margin-left: -.75rem
     +element(end)
       position: relative
       z-index: 20
@@ -56,7 +55,6 @@
     height: auto
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
     background: var(--bal-color-white)
-    transition: border-radius .3s ease-in-out
     +until-widescreen
       width: 100%
       +modifier(expanded)
@@ -79,9 +77,17 @@
         padding-right: 3rem
       > div
         display: flex
-        gap: 1rem
+        gap: .5rem
+        flex-direction: column
         justify-content: flex-start
-        align-items: center
+        align-items: flex-start
+        padding-top: 1rem
+        +high-definition
+          gap: 1rem
+          padding-top: 0
+          flex-direction: row
+          justify-content: flex-start
+          align-items: center
         .bal-tabs--context-navigation
           flex: 1
           overflow: hidden
@@ -121,7 +127,6 @@
       display: block
       max-height: calc(100vh - 160px)
       overflow-y: auto
-      background: var(--bal-color-white)
       padding-left: 1rem
       padding-right: 1rem
       +tablet
@@ -139,7 +144,7 @@
     display: block
     +desktop
       padding-top: 2.5rem
-      padding-bottom: .5rem
+      padding-bottom: 2.5rem
     .bal-nav__menu__wrapper.columns
       margin-bottom: 0
       margin-top: 0
@@ -215,7 +220,6 @@
     height: 4rem
     max-height: 4rem
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
-    z-index: 30
     +desktop
       display: none
     nav
@@ -224,22 +228,20 @@
       gap: .5rem
       align-items: center
       margin: 0 auto
-      padding: 0 1rem
-      +tablet
-        padding: 0 3rem
     .bal-nav__metamobile__actions
       margin-left: auto
       > div
         display: flex
         gap: .5rem
   .bal-nav__main-mobile
     display: block
-    padding: 1.5rem 1rem 4rem
-    z-index: 29
+    padding-top: 1rem
+    padding-bottom: 5rem
     height: var(--bal-nav-main-mobile-height)
     overflow-y: auto
     +tablet
-      padding: 0 3rem
+      padding-top: 2rem
+      padding-bottom: 6rem
     +desktop
       display: none
     +element(link)
@@ -297,6 +299,15 @@
     z-index: 0
 
   +element(popover)
+    .bal-popover__content
+      +tablet
+        width: 100vw
+    .bal-popover__content__inner
+      padding: 1rem
+      +tablet
+        padding: 2rem 2.5rem
+      +desktop
+        padding: 1.5rem
     .bal-navigation-popover__button
       position: relative
       z-index: 20