fix(navbar): update touch view. Closes #770

baloise · Oct 19, 2022 · 24a87c3 · 24a87c3
1 parent b1285cc
commit 24a87c3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/components/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx b/packages/components/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, h, Host, Prop, State, Event, EventEmitter } from '@stencil/core'
+import { BodyScrollBlocker } from '../../../utils/toggle-scrolling-body'
 import { Props } from '../../../types'
 import { BEM } from '../../../utils/bem'
 
@@ -8,6 +9,8 @@ import { BEM } from '../../../utils/bem'
   shadow: false,
 })
 export class NavbarBrand {
+  private bodyScrollBlocker = BodyScrollBlocker()
+
   @Element() el!: HTMLElement
 
   @State() isMenuActive = false
@@ -60,6 +63,13 @@ export class NavbarBrand {
 
   async toggle(isMenuActive: boolean): Promise<void> {
     this.isMenuActive = isMenuActive
+
+    if (this.isMenuActive) {
+      this.bodyScrollBlocker.block()
+    } else {
+      this.bodyScrollBlocker.allow()
+    }
+
     const navbar = this.el.closest('bal-navbar')
     if (navbar) {
       const navbarMenuElement = navbar.querySelector('bal-navbar-menu')

diff --git a/packages/components/src/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.tsx b/packages/components/src/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.tsx
@@ -1,5 +1,6 @@
 import { Component, h, Host, Method, State, Element, Prop } from '@stencil/core'
 import { deepReady } from '../../../helpers/helpers'
+import { isPlatform } from '../../../utils/platform'
 import { Props } from '../../../types'
 import { BEM } from '../../../utils/bem'
 
@@ -12,6 +13,7 @@ export class NavbarMenu {
   @Element() element!: HTMLElement
 
   @State() isMenuActive = false
+  @State() isTouch = isPlatform('touch')
 
   /**
    * @internal
@@ -37,12 +39,22 @@ export class NavbarMenu {
   render() {
     const menuEl = BEM.block('navbar').element('menu')
 
+    let container = ''
+    if (this.isTouch) {
+      const navbarEl = this.element.closest('bal-navbar')
+      if (navbarEl) {
+        container = navbarEl.container
+      }
+    }
+
     return (
       <Host
         class={{
           ...menuEl.class(),
           ...menuEl.modifier('active').class(this.isMenuActive),
           ...menuEl.modifier(`context-${this.interface}`).class(),
+          container: true,
+          [`is-${container}`]: container !== '',
         }}
       >
         <slot></slot>

diff --git a/packages/components/src/components/bal-navbar/bal-navbar.sass b/packages/components/src/components/bal-navbar/bal-navbar.sass
@@ -61,6 +61,7 @@
   +element(menu)
     position: static
     display: none
+    z-index: 30
 
     +modifier(active)
       +touch
@@ -70,7 +71,8 @@
 
     +modifiers(context-app)
       +touch
-        padding: 1rem
+        padding-top: 1rem
+        padding-bottom: 1rem
         overflow-y: auto
         flex-direction: column-reverse
         top: 64px