Mobile menu with subcategory accordions

Author: leomp12

template/pages/@/layout/menu.ejs

@@ -2,21 +2,27 @@
 // load menu options and contacts from content
 const menu = _.cms('menu') || {}
 const contacts = _.cms('contacts') || {}
+
 // some social networks handled by contacts
 const networksWithColors = [
-  ['facebook', '#3B5998'],
-  ['youtube', '#FF0000'],
-  ['instagram', '#E1306C'],
-  ['twitter', '#1DA1F2']
+  ['facebook', '#3b5998'],
+  ['youtube', '#ff0000'],
+  ['instagram', '#e1306c'],
+  ['twitter', '#1da1f2']
 ]
+
 // start grouping categories by parent slug
 const allCategories = menu.alphabetical_order
   ? _.lodash.sortBy(_.categories, ['name'])
   : _.categories
 const categoryParents = _.lodash.groupBy(allCategories, ({ parent }) => {
-  return !parent || !parent.slug ? '_' : parent.slug
+  return !parent || !parent.slug || parent.slug === 'produtos' ? '_' : parent.slug
 })
-const getSubmenuId = slug => `a-${slug.replace(/\//g, '_')}`
+const getSubmenuId = slug => {
+  if (slug === 'produtos') return 'categories-nav'
+  return `a-${slug.replace(/\//g, '_')}`
+}
+
 const mainCategories = categoryParents._
 if (mainCategories) {
   if (Array.isArray(menu.sort_categories)) {
@@ -33,6 +39,7 @@ if (mainCategories) {
   }
 }
 %>
+
 <aside id="menu" class="menu shadow">
   <nav class="accordion" id="accordion-menu">
     <button
@@ -43,6 +50,7 @@ if (mainCategories) {
     >
       <i class="i-times"></i>
     </button>
+
     <% for (const slug in categoryParents) { %>
       <% if (categoryParents.hasOwnProperty(slug)) { %>
         <% let category, parent %>
@@ -58,18 +66,81 @@ if (mainCategories) {
           <% } %>
           data-parent="#accordion-menu"
         >
-            <div class="menu__list">
-            <a href="/camiseta" class="menu__item">Camiseta</a>
-            <a href="/camisetas-infantis" class="menu__item">Camisetas Infantis</a>
-            <a href="/aprenda-se-divertindo" class="menu__item">Aprenda se Divertindo</a>
-            <a href="/estampas" class="menu__item">Estampas</a>
-            <a href="/colecoes" class="menu__item">Coleções</a>
-            <a href="/parceiros" class="menu__item">Parceiros</a>
+
+          <% if (slug !== '_') { %>
+            <% category = _.categories.find(category => category.slug === slug) %>
+            <% parent = category && category.parent %>
+            <button
+              class="menu__btn btn"
+              type="button"
+              data-toggle="collapse"
+              <% if (!parent || !parent.slug) { %>
+                aria-expanded="true"
+                data-target="#categories-nav"
+                aria-controls="categories-nav"
+              <% } else {
+                const submenuId = getSubmenuId(parent.slug)
+                %>
+                aria-expanded="false"
+                data-target="#<%= submenuId %>"
+                aria-controls="<%= submenuId %>"
+              <% } %>
+            >
+              <i class="i-arrow-left"></i>
+            </button>
+          <% } %>
+
+          <div class="menu__list">
+            <% categoryParents[slug].forEach((subcategory, index) => { %>
+              <% const hasSubmenu = Array.isArray(categoryParents[subcategory.slug]) %>
+              <a
+                <% if (hasSubmenu) {
+                  const submenuId = getSubmenuId(subcategory.slug)
+                  %>
+                  href="#<%= submenuId %>"
+                  data-toggle="collapse"
+                  role="button"
+                  aria-expanded="false"
+                  aria-controls="<%= submenuId %>"
+                <% } else { %>
+                  href="/<%= subcategory.slug %>"
+                <% } %>
+                id="c-<%= subcategory._id %>"
+                class="menu__item<%- hasSubmenu ? ' has-subcategory' : '' %>"
+              >
+                <% if (subcategory.icon) { %>
+                  <span class="menu__item-icon">
+                    <img
+                      data-src="<%= subcategory.icon.url %>"
+                      alt="<%= subcategory.icon.alt || subcategory.name %>"
+                      class="lozad"
+                      data-preload="<%= (index * 200) %>"
+                    >
+                  </span>
+                <% } %>
+                <span>
+                  <%= subcategory.name %>
+                </span>
+                <% if (hasSubmenu) { %>
+                  <i class="i-chevron-right"></i>
+                <% } %>
+              </a>
+              <% if (subcategory.slug === 'astronautica') { %>
+                <!-- <a id="c-exemplo" class="menu__item" href="/exemplo"><span> EXEMPLO </span></a> -->
+              <% } %>
+            <% }) %>
           </div>
+
+          <% if (category && category.slug) { %>
+            <a href="/<%= category.slug %>" class="menu__link">
+              <%= _.dictionary('seeAll$1Category').replace('$1', category.name) %>
+            </a>
+          <% } %>
         </div>
       <% } %>
     <% } %>
   </nav>
+
   <footer class="menu__footer">
     <% if (menu.phone_wpp) { %>
       <div class="menu__phone">
@@ -96,6 +167,7 @@ if (mainCategories) {
         <% } %>
       </div>
     <% } %>
+
     <% if (menu.socials) { %>
       <div class="menu__social">
         <% networksWithColors.forEach(([network, color]) => { %>
@@ -115,3 +187,4 @@ if (mainCategories) {
     <% } %>
   </footer>
 </aside>
+  

template/scss/custom-css/_styles.scss

@@ -1612,6 +1612,13 @@ div.backdrop {
 #c-655d99fd2cd6b65959b3a12c,
 #c-655d9e0c2cd6b65959b3a2ac,
 #c-654360f62cd6b65959949ece,
-#c-6682d105f4e6d85ab2c04554 {
+#c-6682d105f4e6d85ab2c04554,
+#c-655d9a102cd6b65959b3a139,
+#c-64c590c95e60690370785d65,
+#c-655d9b0b2cd6b65959b3a1e1,
+#c-6492f5025e6069037042bde7,
+#c-6492f5275e6069037042be58,
+#c-655c744c2cd6b65959b14e68,
+#c-65c8c3f687ab487fbfb30864 {
   display: none;
 }