Merge pull request #138 from vuestorefront/119-mobile-menu

fix: mobile menu
vuestorefront-community · Nov 22, 2021 · b153e20 · b153e20
2 parents 4f5ec10 + 99c3b20
commit b153e20
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/docs/changelog/1.0.0-beta.4.md b/docs/changelog/1.0.0-beta.4.md
@@ -6,5 +6,6 @@
 * [Feature]: implement changeUserEmail [#105](https://github.com/vuestorefront/vendure/issues/105)
 * [Feature]: add Related Products functionality [#37](https://github.com/vuestorefront/vendure/issues/37)
 * [Feature]: implement useWishlist [#66](https://github.com/vuestorefront/vendure/issues/66)
+* [Bug]: mobile menu doesn't work [#119](https://github.com/vuestorefront/vendure/issues/119)
 * [Feature]: implement forgotPassword [#114](https://github.com/vuestorefront/vendure/issues/114)
 * [Bug]: order history does not display order content [#126](https://github.com/vuestorefront/vendure/issues/126)
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <SfHeader
-      class="sf-header--has-mobile-search"
-      :class="{'header-on-top': isSearchOpen}"
+      :class="{'header-on-top': isSearchOpen, 'sf-header--has-mobile-search': isMobileMenuOpen}"
+      :is-nav-visible="isMobileMenuOpen"
     >
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
@@ -137,7 +137,7 @@ export default {
   },
   directives: { clickOutside },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen } = useUiState();
     const { setTermForUrl, getFacetsFromURL } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
     const { cart, load: loadCart } = useCart();
@@ -238,6 +238,7 @@ export default {
       isMobile,
       removeSearchResults,
       headerNavigation,
+      isMobileMenuOpen,
       wishlistTotalItems
     };
   }
@@ -250,6 +251,9 @@ export default {
   @include for-desktop {
     --header-padding: 0;
   }
+  &__navigation.is-visible {
+    --header-navigation-display: block;
+  }
   &__logo-image {
       height: 100%;
   }
@@ -259,9 +263,6 @@ export default {
 }
 .nav-item {
   --header-navigation-item-margin: 0 var(--spacer-base);
-  .sf-header-navigation-item__item--mobile {
-    display: none;
-  }
 }
 
 .cart-badge {