From 86cb823172887ab0715226681bca525231e5a585 Mon Sep 17 00:00:00 2001
From: Kamlesh Singh Bisht <kamlesh.bisht@infosys.com>
Date: Thu, 24 Oct 2024 11:51:46 +0530
Subject: [PATCH] [INJIWEB-1000]: Fix Hamburger Menu Overlap with Logo (#167)

* [INJIWEB-1000]: Fix Hamburger Menu Overlap with Logo

Signed-off-by: Kamlesh Singh Bisht <kamlesh.bisht@infosys.com>

* [INJIWEB-1000]: Fix Hamburger Not-Closing

Signed-off-by: Kamlesh Singh Bisht <kamlesh.bisht@infosys.com>

---------

Signed-off-by: Kamlesh Singh Bisht <kamlesh.bisht@infosys.com>
---
 inji-web/src/components/PageTemplate/Header.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/inji-web/src/components/PageTemplate/Header.tsx b/inji-web/src/components/PageTemplate/Header.tsx
index 0b4cda2..676df4c 100644
--- a/inji-web/src/components/PageTemplate/Header.tsx
+++ b/inji-web/src/components/PageTemplate/Header.tsx
@@ -16,13 +16,13 @@ export const Header: React.FC = () => {
         <div data-testid="Header-Container"
                 className="fixed top-0 left-0 right-0 bg-iw-background py-7 shadow-sm">
             <div className="container mx-auto flex justify-between items-center px-4">
-                <div data-testid="Header-InjiWeb-Logo-Container" className={"flex flex-row justify-center items-center"}>
-                    <div  role="button" tabIndex={0} className={"sm:hidden"} onClick={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
+                <div data-testid="Header-InjiWeb-Logo-Container" className={"flex flex-row space-x-9 justify-center items-center"}>
+                    <div  role="button" tabIndex={0} className={"sm:hidden"} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
                         <GiHamburgerMenu size={32}/>
                     </div>
                     <div role={"button"}
                          tabIndex={0}
-                         onClick={() => navigate("/")}
+                         onMouseDown={() => navigate("/")}
                          onKeyUp={() => navigate("/")}>
                         <img src={require("../../assets/InjiWebLogo.png")}
                              className={"h-13 w-28 scale-150 cursor-pointer"}
@@ -39,7 +39,7 @@ export const Header: React.FC = () => {
                         </li>
                         <li data-testid="Header-Menu-Help">
                             <div data-testid="Header-Menu-Help-div"
-                                 onClick={() => navigate("/help") }
+                                 onMouseDown={() => navigate("/help") }
                                  onKeyUp={() => navigate("/help") }
                                  role="button"
                                  tabIndex={0}
@@ -61,14 +61,14 @@ export const Header: React.FC = () => {
                              role="button"
                              tabIndex={0}
                              onKeyUp={() => {window.open("https://docs.mosip.io/inji/inji-web/overview", "_blank","noopener");setIsOpen(false)}}
-                             onClick={() => {window.open("https://docs.mosip.io/inji/inji-web/overview", "_blank","noopener");setIsOpen(false)}}>
+                             onMouseDown={() => {window.open("https://docs.mosip.io/inji/inji-web/overview", "_blank","noopener");setIsOpen(false)}}>
                             {t("Header.aboutInji")}
                         </div>
                         <div data-testid="Header-Menu-Help"
                              role="button"
                              tabIndex={0}
                              onKeyUp={() => {navigate("/help");setIsOpen(false)}}
-                             onClick={() => {navigate("/help");setIsOpen(false)}}
+                             onMouseDown={() => {navigate("/help");setIsOpen(false)}}
                              className="text-iw-title cursor-pointer py-5 w-full inline-block sm:hidden">
                                 {t("Header.help")}
                         </div>