From ed9f973c2b15bfceebc8ff5a2e8f8759c069ba72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= Date: Thu, 18 Mar 2021 14:27:53 +0100 Subject: [PATCH 1/9] fix: from cr and update customQuery --- .../theme/components/Header/HeaderNav.vue | 108 ++++++++++++++++++ .../commercetools/theme/middleware.config.js | 38 ++++++ .../components/{ => Header}/AppHeader.vue | 13 ++- .../theme/components/Header/HeaderNav.vue | 92 +++++++++++++++ 4 files changed, 247 insertions(+), 4 deletions(-) create mode 100644 packages/commercetools/theme/components/Header/HeaderNav.vue rename packages/core/nuxt-theme-module/theme/components/{ => Header}/AppHeader.vue (95%) create mode 100644 packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue diff --git a/packages/commercetools/theme/components/Header/HeaderNav.vue b/packages/commercetools/theme/components/Header/HeaderNav.vue new file mode 100644 index 00000000000..1a0be3caf63 --- /dev/null +++ b/packages/commercetools/theme/components/Header/HeaderNav.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/packages/commercetools/theme/middleware.config.js b/packages/commercetools/theme/middleware.config.js index 834ffc13788..39d43127c72 100644 --- a/packages/commercetools/theme/middleware.config.js +++ b/packages/commercetools/theme/middleware.config.js @@ -24,6 +24,44 @@ module.exports = { }, currency: 'USD', country: 'US' + }, + customQueries: { + 'root-categories-query': ({ variables }) => { + + const rootCategoriesQuery = ` + fragment DefaultRootCategory on Category { + id + slug(acceptLanguage: $acceptLanguage) + name(acceptLanguage: $acceptLanguage) + childCount + children { + ...Children + } + } + fragment Children on Category { + id + slug(acceptLanguage: $acceptLanguage) + name(acceptLanguage: $acceptLanguage) + } + query categories($where: String, $sort: [String!], $limit: Int, $offset: Int, $acceptLanguage: [Locale!]) { + categories(where: $where, sort: $sort, limit: $limit, offset: $offset) { + offset + count + total + results { + ...DefaultRootCategory + } + } + } + `; + + variables.where = 'parent is not defined'; + + return { + query: rootCategoriesQuery, + variables + }; + } } } } diff --git a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue similarity index 95% rename from packages/core/nuxt-theme-module/theme/components/AppHeader.vue rename to packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue index e2218e899ec..f90082208b8 100644 --- a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue +++ b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue @@ -1,5 +1,6 @@ + + + + diff --git a/packages/core/nuxt-theme-module/theme/components/TopBar.vue b/packages/core/nuxt-theme-module/theme/components/Header/TopBar.vue similarity index 100% rename from packages/core/nuxt-theme-module/theme/components/TopBar.vue rename to packages/core/nuxt-theme-module/theme/components/Header/TopBar.vue diff --git a/packages/core/nuxt-theme-module/theme/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue index 8e2755e7ad1..970d0a4acd9 100644 --- a/packages/core/nuxt-theme-module/theme/layouts/account.vue +++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue @@ -12,9 +12,9 @@ + + diff --git a/packages/core/core/__tests__/composables/useUiState.spec.ts b/packages/core/core/__tests__/composables/useUiState.spec.ts index 4ec89bdd5c7..d775a4ca4b0 100644 --- a/packages/core/core/__tests__/composables/useUiState.spec.ts +++ b/packages/core/core/__tests__/composables/useUiState.spec.ts @@ -6,11 +6,13 @@ const { isLoginModalOpen, isCategoryGridView, isFilterSidebarOpen, + isMobileMenuOpen, toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, toggleCategoryGridView, - toggleFilterSidebar + toggleFilterSidebar, + toggleMobileMenu } = useUiState(); describe('useUiState', () => { @@ -53,4 +55,12 @@ describe('useUiState', () => { expect(expectedIsFilterSidebarOpen).toBe(isFilterSidebarOpen.value); }); + + it('Mobile Menu', () => { + const expectedIsMobileMenuOpen = !isMobileMenuOpen.value; + + toggleMobileMenu(); + + expect(expectedIsMobileMenuOpen).toBe(isMobileMenuOpen.value); + }); }); diff --git a/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue b/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue index 39792b33c73..49abc640ff7 100644 --- a/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue +++ b/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue @@ -2,9 +2,9 @@ - + - + @@ -39,20 +39,27 @@ export default { SfCircleIcon }, setup(props, { root }) { - const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState(); + const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, toggleMobileMenu, isMobileMenuOpen } = useUiState(); const { isAuthenticated } = useUser(); const handleAccountClick = async () => { + if (isMobileMenuOpen.value) toggleMobileMenu(); if (isAuthenticated.value) { return root.$router.push('/my-account'); } toggleLoginModal(); }; + const handleHomeClick = () => { + if (isMobileMenuOpen.value) toggleMobileMenu(); + }; + return { toggleWishlistSidebar, toggleCartSidebar, - handleAccountClick + toggleMobileMenu, + handleAccountClick, + handleHomeClick }; } }; diff --git a/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue index f90082208b8..9db2f720c8e 100644 --- a/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue +++ b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue @@ -90,6 +90,10 @@ + @@ -103,6 +107,7 @@ import { useUiHelpers } from '~/composables'; import LocaleSelector from './LocaleSelector'; import SearchResults from '~/components/SearchResults'; import HeaderNav from './HeaderNav'; +import MobileMenu from './MobileMenu'; import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js'; import { mapMobileObserver, @@ -121,11 +126,12 @@ export default { SfSearchBar, SearchResults, SfOverlay, - HeaderNav + HeaderNav, + MobileMenu }, directives: { clickOutside }, setup(props, { root }) { - const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState(); + const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen } = useUiState(); const { setTermForUrl, getFacetsFromURL, getSearchTermFromUrl} = useUiHelpers(); const { result, search } = useFacet(); const { isAuthenticated, load: loadUser } = useUser(); @@ -213,7 +219,8 @@ export default { closeOrFocusSearchBar, searchBarRef, isMobile, - isOverlayVisible + isOverlayVisible, + isMobileMenuOpen }; } }; @@ -236,10 +243,20 @@ export default { .nav-item { --header-navigation-item-margin: 0 var(--spacer-base); } - .cart-badge { position: absolute; bottom: 40%; left: 40%; } +.mobile-menu { + position: fixed; + opacity: 1; + visibility: visible; + overflow-y: auto; + overflow-x: hidden; + top: 0; + z-index: 1; + width: 100%; + --mega-menu-aside-menu-height: calc(100vh - var(--bottom-navigation-height) - var(--bar-height)); +} diff --git a/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue b/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue index 89e73257565..cc01e6b000f 100644 --- a/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue +++ b/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue @@ -2,7 +2,7 @@ @@ -86,7 +86,10 @@ export default { diff --git a/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue b/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue new file mode 100644 index 00000000000..b147f9096f3 --- /dev/null +++ b/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiState.ts b/packages/core/nuxt-theme-module/theme/composables/useUiState.ts index e526b286937..95b3828dcf4 100644 --- a/packages/core/nuxt-theme-module/theme/composables/useUiState.ts +++ b/packages/core/nuxt-theme-module/theme/composables/useUiState.ts @@ -9,22 +9,31 @@ const state = reactive({ isWishlistSidebarOpen: false, isLoginModalOpen: false, isCategoryGridView: true, - isFilterSidebarOpen: false + isFilterSidebarOpen: false, + isMobileMenuOpen: false }); const useUiState = () => { + const isMobileMenuOpen = computed(() => state.isMobileMenuOpen); + const toggleMobileMenu = () => { + state.isMobileMenuOpen = !state.isMobileMenuOpen; + }; + const isCartSidebarOpen = computed(() => state.isCartSidebarOpen); const toggleCartSidebar = () => { + if (state.isMobileMenuOpen) toggleMobileMenu(); state.isCartSidebarOpen = !state.isCartSidebarOpen; }; const isWishlistSidebarOpen = computed(() => state.isWishlistSidebarOpen); const toggleWishlistSidebar = () => { + if (state.isMobileMenuOpen) toggleMobileMenu(); state.isWishlistSidebarOpen = !state.isWishlistSidebarOpen; }; const isLoginModalOpen = computed(() => state.isLoginModalOpen); const toggleLoginModal = () => { + if (state.isMobileMenuOpen) toggleMobileMenu(); state.isLoginModalOpen = !state.isLoginModalOpen; }; @@ -44,11 +53,13 @@ const useUiState = () => { isLoginModalOpen, isCategoryGridView, isFilterSidebarOpen, + isMobileMenuOpen, toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, toggleCategoryGridView, - toggleFilterSidebar + toggleFilterSidebar, + toggleMobileMenu }; }; From e41170ecb105ebd2dc7b59d99ca64f14974a07b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= Date: Sat, 27 Mar 2021 00:27:44 +0100 Subject: [PATCH 8/9] fix: dom exception --- .../theme/components/Header/AppHeader.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue index 9db2f720c8e..f3acdea5d74 100644 --- a/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue +++ b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue @@ -13,7 +13,10 @@