feat(theme): add nested categories in mobile category menu

Author: sethidden

packages/theme/components/BottomNavigation.vue

@@ -72,7 +72,7 @@
         </template>
       </SfBottomNavigationItem>
     </SfBottomNavigation>
-    <MobileMenuSidebar />
+    <MobileCategorySidebar />
   </div>
 </template>
 
@@ -81,14 +81,14 @@ import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { useUser } from '@vue-storefront/magento';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState } from '~/composables';
-import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
+import MobileCategorySidebar from '~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue';
 
 export default defineComponent({
   components: {
     SfBottomNavigation,
     SfCircleIcon,
-    MobileMenuSidebar,
+    MobileCategorySidebar,
     SvgImage,
   },
   setup() {

packages/theme/components/MobileMenuSidebar.vue

@@ -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/de.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/lang/en.js

@@ -65,8 +65,8 @@ import {
   useRoute,
 } from '@nuxtjs/composition-api';
 
-import { useSidebar } from './useSidebar.ts';
 import { useUiHelpers } from '~/composables';
+import { loadCategoryTree, findActiveCategoryLabel } from '~/modules/catalog/category/helpers/buildCategoryTree';
 import SkeletonLoader from '~/components/SkeletonLoader';
 
 export default defineComponent({
@@ -83,11 +83,10 @@ export default defineComponent({
     const activeCategory = ref('');
     const isLoading = ref(true);
     const route = useRoute();
-    const { loadCategoryTree, findActiveCategory } = useSidebar();
 
     onMounted(async () => {
       categoryTree.value = await loadCategoryTree() ?? {};
-      activeCategory.value = findActiveCategory(categoryTree.value, route.value.fullPath);
+      activeCategory.value = findActiveCategoryLabel(categoryTree.value, route.value.fullPath);
       isLoading.value = false;
     });
 

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

@@ -0,0 +1,129 @@
+<template>
+  <SfSidebar
+    :visible="isMobileMenuOpen"
+    :title="currentCategory && currentCategory.label || $t('Menu')"
+    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"
+        :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 findDeep from 'deepdash/findDeep';
+import {
+  SfSidebar, SfList, SfMenuItem,
+} from '@storefront-ui/vue';
+import {
+  defineComponent,
+  computed, useRouter, useContext, useRoute,
+} from '@nuxtjs/composition-api';
+import { categoryGetters, useCategory } from '@vue-storefront/magento';
+import { useUiHelpers, useUiState } from '~/composables';
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+import { findAncestorsInCategoryTree, useMobileCategoryTree } from './logic';
+
+export default defineComponent({
+  components: {
+    SfSidebar,
+    SfList,
+    SfMenuItem,
+  },
+  setup() {
+    const { categories } = useCategory('AppHeader:CategoryList');
+    const { isMobileMenuOpen, toggleMobileMenu } = useUiState();
+    const { getAgnosticCatLink } = useUiHelpers();
+    const router = useRouter();
+    const route = useRoute();
+    const app = useContext();
+
+    const categoryTree = computed(
+      () => categoryGetters.getCategoryTree(categories.value?.[0])?.items.filter((c) => c.count > 0),
+    );
+
+    const navigate = (category: CategoryTreeInterface) => {
+      toggleMobileMenu();
+      const path = app.localePath(getAgnosticCatLink(category) as string);
+      router.push(path);
+    };
+
+    const activeCategory: CategoryTreeInterface = findDeep(categoryTree.value, (value, key) => key === 'slug' && value === route.value.fullPath.replace('/default/c', ''))?.parent;
+    const initialHistory: CategoryTreeInterface[] = findAncestorsInCategoryTree(categoryTree.value as CategoryTreeInterface[], activeCategory);
+
+    const {
+      current: currentCategory, history, currentItems, onGoCategoryUp, onGoCategoryDown,
+    } = useMobileCategoryTree(initialHistory);
+
+    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/MobileCategorySidebar.vue

@@ -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/__tests__/logic.spec.ts

@@ -0,0 +1,44 @@
+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,
+  };
+};
+
+/*
+ * Finds each category preceding `toFind` in the category tree
+ * Uses a modified Breadth First Search algorithm to tell you if the toFind node exists how to get to it
+ * @returns Flat array of categories ([level1Obj, level2Obj, level3Obj])
+ */
+export const findCategoryAncestors = (node: CategoryTreeInterface, toFind: CategoryTreeInterface, startingArray = []) => {
+  if (node === toFind) {
+    // an itemless category can't be "entered into" so it must be removed from the end
+    const tailHasChildren = startingArray.at(-1)?.items.length;
+    return tailHasChildren ? startingArray : startingArray.slice(0, -1);
+  }
+  if (node.items.length > 0) {
+    for (let i = 0; i < node.items.length; i += 1) {
+      const subnode = node.items[0];
+      const result = findCategoryAncestors(subnode, toFind, [...startingArray, subnode]);
+      if (result) return result;
+    }
+  }
+  return null;
+};
+
+export const findAncestorsInCategoryTree = (categoryTree: CategoryTreeInterface[], toFind: CategoryTreeInterface) => categoryTree
+  .map((el) => findCategoryAncestors(el, toFind, [el])).find((x) => x);