From 19b2239c481e946ae3748f1a727f16a5ce417573 Mon Sep 17 00:00:00 2001
From: Tomas Vykoukal <vykoukal.tom@gmail.com>
Date: Tue, 12 Sep 2023 09:07:22 +0200
Subject: [PATCH] close menu popup after click on link inside

- and refactor Navigation components
---
 .../Header/Navigation/NavigationItem.tsx      |  5 +-
 .../Navigation/NavigationItemColumn.tsx       | 48 +++++++++++++++++--
 .../NavigationItemColumnCategory.tsx          | 39 ---------------
 .../NavigationItemColumnCategoryList.tsx      | 24 ----------
 4 files changed, 49 insertions(+), 67 deletions(-)
 delete mode 100644 storefront/components/Layout/Header/Navigation/NavigationItemColumnCategory.tsx
 delete mode 100644 storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx

diff --git a/storefront/components/Layout/Header/Navigation/NavigationItem.tsx b/storefront/components/Layout/Header/Navigation/NavigationItem.tsx
index 606c509dd4..3c28b23e5e 100644
--- 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
index f9f9883999..64cc4ae9fc 100644
--- 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
deleted file mode 100644
index 94bdef77d4..0000000000
--- a/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategory.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
-import { Image } from 'components/Basic/Image/Image';
-import { NavigationItemColumnCategoryList } from 'components/Layout/Header/Navigation/NavigationItemColumnCategoryList';
-import { ColumnCategoryFragmentApi } from 'graphql/generated';
-
-type NavigationItemColumnCategoryProps = {
-    columnCategory: ColumnCategoryFragmentApi;
-};
-
-export const NavigationItemColumnCategory: FC<NavigationItemColumnCategoryProps> = ({ columnCategory }) => {
-    return (
-        <li>
-            <ExtendedNextLink
-                href={columnCategory.slug}
-                type="static"
-                className="mb-4 flex justify-center rounded bg-dark bg-opacity-5 p-2"
-            >
-                <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"
-            >
-                {columnCategory.name}
-            </ExtendedNextLink>
-
-            {columnCategory.children.length > 0 && (
-                <NavigationItemColumnCategoryList columnCategoryChildren={columnCategory.children} />
-            )}
-        </li>
-    );
-};
diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx
deleted file mode 100644
index f64d754653..0000000000
--- a/storefront/components/Layout/Header/Navigation/NavigationItemColumnCategoryList.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
-import { NavigationSubCategoriesLinkFragmentApi } from 'graphql/generated';
-
-type NavigationItemColumnCategoryListProps = {
-    columnCategoryChildren: NavigationSubCategoriesLinkFragmentApi['children'];
-};
-
-export const NavigationItemColumnCategoryList: FC<NavigationItemColumnCategoryListProps> = ({
-    columnCategoryChildren,
-}) => (
-    <ul className="flex w-full flex-col gap-1">
-        {columnCategoryChildren.map((columnCategoryChild) => (
-            <li key={columnCategoryChild.name}>
-                <ExtendedNextLink
-                    type="category"
-                    href={columnCategoryChild.slug}
-                    className="block text-sm text-dark no-underline"
-                >
-                    {columnCategoryChild.name}
-                </ExtendedNextLink>
-            </li>
-        ))}
-    </ul>
-);