close menu popup after click on link inside (#2785)

shopsys · Sep 13, 2023 · bde1c05 · bde1c05
2 parents 550eaa1 + 19b2239
commit bde1c05
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 67 deletions.
diff --git a/storefront/components/Layout/Header/Navigation/NavigationItem.tsx b/storefront/components/Layout/Header/Navigation/NavigationItem.tsx
@@ -39,7 +39,10 @@ export const NavigationItem: FC<NavigationItemProps> = (props) => {
 
             {hasChildren && isMenuOpened && (
                 <div className="absolute left-0 right-0 z-menu grid grid-cols-4 gap-11 bg-white py-12 px-10 shadow-md">
-                    <NavigationItemColumn columnCategories={props.navigationItem.categoriesByColumns} />
+                    <NavigationItemColumn
+                        columnCategories={props.navigationItem.categoriesByColumns}
+                        onLinkClick={() => setIsMenuOpened(false)}
+                    />
                 </div>
             )}
         </li>

diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
@@ -1,16 +1,58 @@
-import { NavigationItemColumnCategory } from 'components/Layout/Header/Navigation/NavigationItemColumnCategory';
+import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { ColumnCategoriesFragmentApi } from 'graphql/generated';
+import { Image } from 'components/Basic/Image/Image';
 
 type NavigationItemColumnProps = {
     columnCategories: ColumnCategoriesFragmentApi[];
+    onLinkClick: () => void;
 };
 
-export const NavigationItemColumn: FC<NavigationItemColumnProps> = ({ columnCategories }) => (
+export const NavigationItemColumn: FC<NavigationItemColumnProps> = ({ columnCategories, onLinkClick }) => (
     <>
         {columnCategories.map((columnCategories, columnIndex) => (
             <ul className="flex flex-col gap-9" key={columnIndex}>
                 {columnCategories.categories.map((columnCategory, columnCategoryIndex) => (
-                    <NavigationItemColumnCategory key={columnCategoryIndex} columnCategory={columnCategory} />
+                    <li key={columnCategoryIndex}>
+                        <ExtendedNextLink
+                            href={columnCategory.slug}
+                            type="static"
+                            className="mb-4 flex justify-center rounded bg-dark bg-opacity-5 p-2"
+                            onClick={onLinkClick}
+                        >
+                            <Image
+                                image={columnCategory.mainImage}
+                                type="default"
+                                alt={columnCategory.mainImage?.name || columnCategory.name}
+                                className="h-16 mix-blend-multiply"
+                            />
+                        </ExtendedNextLink>
+
+                        <ExtendedNextLink
+                            href={columnCategory.slug}
+                            type="static"
+                            className="mb-1 block font-bold text-dark no-underline"
+                            onClick={onLinkClick}
+                        >
+                            {columnCategory.name}
+                        </ExtendedNextLink>
+
+                        {!!columnCategory.children.length && (
+                            <ul className="flex w-full flex-col gap-1">
+                                {columnCategory.children.map((columnCategoryChild) => (
+                                    <li key={columnCategoryChild.name}>
+                                        <ExtendedNextLink
+                                            type="category"
+                                            href={columnCategoryChild.slug}
+                                            className="block text-sm text-dark no-underline"
+                                            onClick={onLinkClick}
+                                        >
+                                            {columnCategoryChild.name}
+                                        </ExtendedNextLink>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </li>
                 ))}
             </ul>
         ))}

diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategory.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategory.tsx
diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx