separated the catergories without subs

syatt-io · Sep 12, 2022 · dc7e3cd · dc7e3cd
1 parent 5de0c49
commit dc7e3cd
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 6 deletions.
diff --git a/react/MegaMenu/components/Submenu.tsx b/react/MegaMenu/components/Submenu.tsx
@@ -135,6 +135,9 @@ const Submenu: FC<ItemProps> = observer((props) => {
       return categories
         .filter((j) => j.display)
         .map((category, i) => {
+          if(!category.menu?.length) {
+            return
+          }
           const subcategories = category.menu?.length
             ? subCategories(category.menu)
             : []
@@ -222,6 +225,66 @@ const Submenu: FC<ItemProps> = observer((props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [departmentActive, collapsibleStates]
   )
+
+  const itemsWithNoSubCategories = useMemo(
+    () => {
+      if (!departmentActive) return
+
+      if (departmentActive.menu) {
+        if (departmentActive.menu.length > 1) {
+          setShowBtnCat(true)
+        } else {
+          setShowBtnCat(false)
+        }
+      } else {
+        setShowBtnCat(false)
+      }
+
+      const categories = getCategories()
+
+      return categories
+        .filter((j) => j.display)
+        .map((category, i) => {
+          if(category.menu?.length) {
+            return
+          }
+          return (
+            <div
+              key={category.id}
+              className={classNames(
+                applyModifiers(
+                  orientation === 'horizontal'
+                    ? styles.submenuItem
+                    : handles.submenuItemVertical,
+                  collapsibleStates[category.id] ? 'isOpen' : 'isClosed'
+                ),
+                orientation === 'vertical' &&
+                  'c-on-base bb b--light-gray mv0 ph5',
+                orientation === 'vertical' && i === 0 && 'bt',
+                collapsibleStates[category.id] && 'bg-near-white'
+              )}
+            >
+                <>
+                  <Item
+                    className="vtex-title-link"
+                    to={category.slug}
+                    iconId={category.icon}
+                    level={2}
+                    style={category.styles}
+                    isTitle
+                    enableStyle={category.enableSty}
+                    closeMenu={closeMenu}
+                  >
+                    {category.name}
+                  </Item>
+                </>
+            </div>
+          )
+        })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [departmentActive, collapsibleStates]
+  )
 
   return (
     <>
@@ -244,7 +307,7 @@ const Submenu: FC<ItemProps> = observer((props) => {
               </>
             )}
           </h3>
-
+          <div className='syatt-mega-menu-3-x-categories-container'>
           <div
             className={classNames(
               orientation === 'horizontal' && styles.submenuList,
@@ -253,7 +316,8 @@ const Submenu: FC<ItemProps> = observer((props) => {
           >
             {orientation === 'horizontal' ? (
               <>
-                <ExtensionPoint id="before-menu" /> {items}{' '}
+                <ExtensionPoint id="before-menu" /> 
+                {items}
                 <ExtensionPoint id="after-menu" />
               </>
             ) : (
@@ -262,6 +326,10 @@ const Submenu: FC<ItemProps> = observer((props) => {
               </>
             )}
           </div>
+          <div className='syatt-mega-menu-3-x-sub-catergories--no-sub'>
+            {itemsWithNoSubCategories}
+          </div>
+          </div>
         </>
       )}
     </>

diff --git a/react/MegaMenu/styles.css b/react/MegaMenu/styles.css
@@ -8,10 +8,36 @@
   width: 300px;
 }
 
+.categories-container {
+  display:flex;
+}
+
+.categories-container > .submenuList > .submenuItem{
+  margin-right: 2rem;
+}
+
 .submenuList {
-  display: grid;
-  gap: 2rem;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  display: flex;
+  /* display: grid; */
+  /* gap: 0.5rem; */
+  /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
+  flex-wrap: wrap;
+}
+
+.sub-catergories--no-sub {
+  width: 25rem;
+  max-height: 30rem;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.sub-catergories--no-sub > .submenuItem {
+  margin: 0 1rem 1rem 0;
+}
+
+.sub-catergories--no-sub > .submenuItem > .styledLinkContainer > .styledLink {
+  font-size: 0.85rem;
 }
 
 .submenuList > .submenuItem {
@@ -21,7 +47,7 @@
 .styledLink,
 .goBackButton,
 .triggerContainer {
-  font-weight: bold;
+  font-weight: 600;
   border: none;
   background: transparent;
   outline: transparent;