feat(theme): support navigating to nested categories in mobile side menu

packages/theme/components/BottomNavigation.vue

@@ -18,7 +18,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Menu"
-        @click="toggleMobileMenu"
+        @click="loadCategoryMenu"
       >
         <template #icon>
           <SvgImage
@@ -72,22 +72,25 @@
         </template>
       </SfBottomNavigationItem>
     </SfBottomNavigation>
-    <MobileMenuSidebar />
+    <MobileCategorySidebar v-if="isMobileMenuOpen" />
   </div>
 </template>
 
 <script>
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState, useUser } from '~/composables';
-import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
+import { useCategoryStore } from '~/stores/category';
+import { useApi } from '~/composables/useApi';
+
+const MobileCategorySidebar = () => import('~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue');
 
 export default defineComponent({
   components: {
     SfBottomNavigation,
     SfCircleIcon,
-    MobileMenuSidebar,
+    MobileCategorySidebar,
     SvgImage,
   },
   setup() {
@@ -101,6 +104,7 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const router = useRouter();
     const { app } = useContext();
+    const api = useApi();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(`${app.localePath('/my-account')}`);
@@ -109,12 +113,21 @@ export default defineComponent({
       }
     };
 
+    const loadCategoryMenu = async () => {
+      const categories = useCategoryStore(api);
+      if (categories.categories === null) {
+        await categories.load();
+      }
+      toggleMobileMenu();
+    };
+
     return {
       isAuthenticated,
       isMobileMenuOpen,
       toggleWishlistSidebar,
       toggleCartSidebar,
       toggleMobileMenu,
+      loadCategoryMenu,
       handleAccountClick,
       app,
     };

packages/theme/lang/de.js

@@ -253,4 +253,5 @@ export default {
   "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.": "Beim Versuch, Versandarten abzurufen, ist ein Fehler aufgetreten. Es tut uns leid, bitte versuchen Sie es mit anderen Versanddetails oder später.",
   "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.": "Beim Versuch, diese Versandart auszuwählen, ist ein Fehler aufgetreten. Es tut uns leid, bitte versuchen Sie es mit einer anderen Versandart.",
   "We can't find products matching the selection.":"Wir können keine Produkte finden, die der Auswahl entsprechen.",
+  "AllProductsFromCategory": "Alle {categoryName}"
 };

packages/theme/lang/en.js

@@ -251,4 +251,5 @@ export default {
   "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.": "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.",
   "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.": "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.",
   "We can't find products matching the selection.":"We can't find products matching the selection.",
+  "AllProductsFromCategory": "All {categoryName}"
 };

packages/theme/modules/catalog/category/components/sidebar/CategorySidebar.vue

@@ -4,17 +4,17 @@
     height="500px"
   >
     <SfAccordion
-      :open="activeCategory"
-      :show-chevron="true"
+      :open="topLevelCategoryLabel"
+      show-chevron
     >
       <SfAccordionItem
-        v-for="(cat, i) in categoryTree.items"
+        v-for="(cat, i) in categoryTree && categoryTree.items"
         :key="i"
         :header="cat.label"
       >
         <SfList class="list">
           <SfListItem
-            v-for="(subCat, j) in cat.items"
+            v-for="(subCat, j) in cat && cat.items"
             :key="j"
             class="list__item"
           >
@@ -54,23 +54,25 @@
   </SkeletonLoader>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfList,
   SfMenuItem,
   SfAccordion,
 } from '@storefront-ui/vue';
+
 import {
   defineComponent, onMounted, ref,
-  useRoute,
+  useRoute, computed,
 } from '@nuxtjs/composition-api';
-
 import { useUiHelpers } from '~/composables';
-import { useSidebar } from './useSidebar.ts';
-import SkeletonLoader from '~/components/SkeletonLoader';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import { useApi } from '~/composables/useApi';
+import { useCategoryStore } from '~/stores/category';
+import { findActiveCategory, findCategoryAncestors } from '~/modules/catalog/category/helpers';
+import { CategoryTreeInterface } from '../../types';
 
 export default defineComponent({
-  name: 'CategorySidebar',
   components: {
     SfList,
     SfMenuItem,
@@ -79,23 +81,31 @@ export default defineComponent({
   },
   setup() {
     const uiHelpers = useUiHelpers();
-    const categoryTree = ref({});
-    const activeCategory = ref('');
-    const isLoading = ref(true);
     const route = useRoute();
-    const { loadCategoryTree, findActiveCategory } = useSidebar();
+    const api = useApi();
+
+    const categoryStore = useCategoryStore(api);
+    const categoryTree = computed(() => categoryStore.categories);
+    const activeCategory = ref<CategoryTreeInterface | null>(null);
+    const activeCategoryAncestors = ref(null);
+    const isLoading = ref(true);
 
     onMounted(async () => {
-      categoryTree.value = await loadCategoryTree() ?? {};
-      activeCategory.value = findActiveCategory(categoryTree.value, route.value.fullPath);
+      if (categoryStore.categories === null) {
+        await categoryStore.load();
+      }
+      activeCategory.value = findActiveCategory(categoryTree.value, route.value.fullPath.replace('/default/c', ''));
+      activeCategoryAncestors.value = findCategoryAncestors(categoryStore.categories, activeCategory.value);
       isLoading.value = false;
     });
 
+    const topLevelCategoryLabel = computed(() => activeCategoryAncestors.value?.[0]?.label);
+
     return {
       ...uiHelpers,
       categoryTree,
-      activeCategory,
       isLoading,
+      topLevelCategoryLabel,
     };
   },
 });

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue

@@ -0,0 +1,133 @@
+<template>
+  <SfSidebar
+    :title="currentCategory && currentCategory.label || $t('Menu')"
+    visible
+    class="mobile-menu-sidebar sf-sidebar--left"
+    @close="toggleMobileMenu"
+  >
+    <SfList class="mobile-menu-sidebar__list">
+      <template v-if="currentCategory">
+        <SfMenuItem
+          class="mobile-menu-sidebar__item"
+          :label="$i18n.t('Go back')"
+          @click="onGoCategoryUp()"
+        >
+          <template #mobile-nav-icon>
+            <div v-show="false" />
+          </template>
+        </SfMenuItem>
+
+        <SfMenuItem
+          class="mobile-menu-sidebar__item"
+          :label="$i18n.t('AllProductsFromCategory', { categoryName: currentCategory.label })"
+          :count="currentCategory.count"
+          @click="navigate(currentCategory)"
+        />
+      </template>
+      <SfMenuItem
+        v-for="(category, index) in currentItems || categoryTree.items"
+        :key="index"
+        :label="category.label"
+        :count="category.count"
+        class="mobile-menu-sidebar__item"
+        @click="category.items.length === 0 ? navigate(category) : onGoCategoryDown(category)"
+      />
+    </SfList>
+  </SfSidebar>
+</template>
+<script lang="ts">
+import {
+  SfSidebar, SfList, SfMenuItem,
+} from '@storefront-ui/vue';
+import {
+  defineComponent, useRouter, useContext, useRoute,
+} from '@nuxtjs/composition-api';
+import { useUiHelpers, useUiState } from '~/composables';
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+import { findActiveCategory, findCategoryAncestors } from '~/modules/catalog/category/helpers';
+import { useApi } from '~/composables/useApi';
+import { useCategoryStore } from '~/stores/category';
+import { useMobileCategoryTree } from './logic';
+
+export default defineComponent({
+  components: {
+    SfSidebar,
+    SfList,
+    SfMenuItem,
+  },
+  setup() {
+    const api = useApi();
+    const { isMobileMenuOpen, toggleMobileMenu } = useUiState();
+    const { getAgnosticCatLink } = useUiHelpers();
+    const router = useRouter();
+    const route = useRoute();
+    const app = useContext();
+
+    const categoryStore = useCategoryStore(api);
+    const categoryTree = categoryStore.categories;
+
+    const navigate = (category: CategoryTreeInterface) => {
+      toggleMobileMenu();
+      const path = app.localePath(getAgnosticCatLink(category) as string);
+      router.push(path);
+    };
+
+    const activeCategory = findActiveCategory(categoryTree, route.value.fullPath.replace('/default/c', ''));
+    const initialHistory: CategoryTreeInterface[] = activeCategory === null ? [] : findCategoryAncestors(categoryTree, activeCategory);
+
+    // A category-less category can't be entered into - it can only navigated to
+    const initialHistoryWithSnippedSubcategorylessTail = initialHistory.at(-1)?.items.length
+      ? initialHistory
+      : initialHistory.slice(0, -1);
+
+    const {
+      current: currentCategory, history, currentItems, onGoCategoryUp, onGoCategoryDown,
+    } = useMobileCategoryTree(initialHistoryWithSnippedSubcategorylessTail);
+
+    return {
+      currentCategory,
+      currentItems,
+      onGoCategoryUp,
+      onGoCategoryDown,
+      categoryTree,
+      history,
+
+      navigate,
+      isMobileMenuOpen,
+      toggleMobileMenu,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.mobile-menu-sidebar {
+  --sidebar-z-index: 3;
+  --overlay-z-index: 3;
+
+  &__list {
+    .mobile-menu-sidebar__item {
+      padding: var(--spacer-base) 0;
+      --menu-item-font-size: 1.75rem;
+
+      &:not(:first-of-type) {
+        border-top: 1px solid var(--c-light);
+      }
+
+      &:not(:last-of-type) {
+        border-bottom: 1px solid var(--c-light);
+      }
+    }
+  }
+
+  ::v-deep {
+    .nuxt-link-active {
+      --menu-item-label-color: var(--c-primary);
+    }
+  }
+}
+.go-back {
+  display: flex;
+  align-items: center;
+}
+</style>

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/logic.spec.ts

@@ -0,0 +1,41 @@
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+import { useMobileCategoryTree } from '../logic';
+
+const createCategoryItem = (label: string): CategoryTreeInterface => ({
+  label, items: [], isCurrent: false, count: 10,
+});
+
+describe('categoryTreeLogic', () => {
+  it('can go down down a category', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const { history, current, onGoCategoryDown } = useMobileCategoryTree();
+    onGoCategoryDown(itemFirst);
+    expect(current.value.label).toBe(itemFirst.label);
+    expect(history.value).toHaveLength(1);
+  });
+
+  it('can go up a category', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const itemSecond = createCategoryItem('Itemless2');
+
+    const { current, onGoCategoryDown, onGoCategoryUp } = useMobileCategoryTree();
+
+    onGoCategoryDown(itemFirst);
+    onGoCategoryDown(itemSecond);
+    onGoCategoryUp();
+
+    expect(current.value.label).toBe(itemFirst.label);
+  });
+
+  it('current item is last in history', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const itemSecond = createCategoryItem('Itemless2');
+    const { history, current, onGoCategoryDown } = useMobileCategoryTree();
+
+    onGoCategoryDown(itemFirst);
+    onGoCategoryDown(itemSecond);
+
+    expect(current.value.label).toBe(itemSecond.label);
+    expect(history.value).toHaveLength(2);
+  });
+});

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/logic.ts

@@ -0,0 +1,20 @@
+import { computed, ref } from '@nuxtjs/composition-api';
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+
+export const useMobileCategoryTree = (initialHistory: CategoryTreeInterface[] = []) => {
+  const history = ref<CategoryTreeInterface[]>(initialHistory);
+  const current = computed<CategoryTreeInterface | null>(() => history.value.at(-1) ?? null);
+  const currentItems = computed<CategoryTreeInterface[]>(() => current.value?.items);
+  const onGoCategoryDown = (category: CategoryTreeInterface) => {
+    history.value.push(category);
+  };
+  const onGoCategoryUp = () => history.value.pop();
+
+  return {
+    history,
+    current,
+    currentItems,
+    onGoCategoryUp,
+    onGoCategoryDown,
+  };
+};