[INJIWEB-1000]: Fix Hamburger Menu Overlap with Logo (#167)

* [INJIWEB-1000]: Fix Hamburger Menu Overlap with Logo Signed-off-by: Kamlesh Singh Bisht <[email protected]> * [INJIWEB-1000]: Fix Hamburger Not-Closing Signed-off-by: Kamlesh Singh Bisht <[email protected]> --------- Signed-off-by: Kamlesh Singh Bisht <[email protected]>
mosip · Oct 24, 2024 · 86cb823 · 86cb823
1 parent de968e8
commit 86cb823
Showing 1 changed file with 6 additions and 6 deletions.
diff --git 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>