forked from mosip/inji-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[INJIWEB-1147]: fix hamburger-overlapping
Signed-off-by: SAIRAM GIRIRAO <[email protected]>
- Loading branch information
1 parent
3ddb770
commit 3fa3024
Showing
1 changed file
with
58 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,76 @@ | ||
| import React, {useState} from "react"; | ||
| import {useTranslation} from "react-i18next"; | ||
| import {useNavigate} from "react-router-dom"; | ||
| import {LanguageSelector} from "../Common/LanguageSelector"; | ||
| import React, { useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { LanguageSelector } from "../Common/LanguageSelector"; | ||
| import { HelpDropdown } from "../Common/HelpDropdown"; | ||
| import {GiHamburgerMenu} from "react-icons/gi"; | ||
| import { GiHamburgerMenu } from "react-icons/gi"; | ||
| import OutsideClickHandler from 'react-outside-click-handler'; | ||
| import { RootState } from "../../types/redux"; | ||
| import { useSelector } from "react-redux"; | ||
| export const Header: React.FC = () => { | ||
|
|
||
| export const Header: React.FC = () => { | ||
| const language = useSelector((state: RootState) => state.common.language); | ||
| const {t} = useTranslation("PageTemplate"); | ||
| const { t, i18n } = useTranslation("PageTemplate"); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const isRTL = i18n.dir() === 'rtl'; | ||
|
|
||
| return ( | ||
| <header> | ||
| <div data-testid="Header-Container" | ||
| <div data-testid="Header-Container" | ||
| className="fixed top-0 left-0 right-0 bg-iw-background py-7 z-10"> | ||
| <div className="container mx-auto flex justify-between items-center px-4"> | ||
| <div data-testid="Header-InjiWeb-Logo-Container" className={"flex flex-row space-x-9 justify-center items-center"}> | ||
| <div role="button" tabIndex={0} className={"m-3 sm:hidden"} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}> | ||
| <GiHamburgerMenu size={32}/> | ||
| </div> | ||
| <div role={"button"} | ||
| tabIndex={0} | ||
| onMouseDown={() => navigate("/")} | ||
| onKeyUp={() => navigate("/")}> | ||
| <img src={require("../../assets/InjiWebLogo.png")} | ||
| className={"h-13 w-28 scale-150 cursor-pointer"} | ||
| data-testid="Header-InjiWeb-Logo" | ||
| alt="Inji Web Logo"/> | ||
| <div className="container mx-auto flex justify-between items-center px-4"> | ||
| <div data-testid="Header-InjiWeb-Logo-Container" className={`flex flex-row ${isRTL ? 'space-x-reverse' : 'space-x-9'} justify-center items-center`}> | ||
| <div role="button" tabIndex={0} className={`m-3 sm:hidden ${isRTL ? 'ml-4' : ''}`} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}> | ||
| <GiHamburgerMenu size={32} /> | ||
| </div> | ||
| <div role={"button"} | ||
| tabIndex={0} | ||
| onMouseDown={() => navigate("/")} | ||
| onKeyUp={() => navigate("/")}> | ||
| <img src={require("../../assets/InjiWebLogo.png")} | ||
| className={`h-13 w-28 scale-150 cursor-pointer ${isRTL ? 'mr-4' : ''}`} | ||
| data-testid="Header-InjiWeb-Logo" | ||
| alt="Inji Web Logo" /> | ||
| </div> | ||
| </div> | ||
| <nav> | ||
| <ul className="flex space-x-10 items-center font-semibold" data-testid="Header-Menu-Elements"> | ||
| <li data-testid="Header-Menu-Home"> | ||
| <div data-testid="Header-Menu-Home-div" | ||
| onMouseDown={() => navigate("/") } | ||
| onKeyUp={() => navigate("/") } | ||
| role="button" | ||
| tabIndex={0} | ||
| className="text-iw-title cursor-pointer hidden sm:inline-block">{t("Header.home")}</div> | ||
| </li> | ||
| <li data-testid="Header-Menu-Help"> | ||
| <div className={" hidden sm:block font-semibold"} data-testid="Header-Menu-Help-div"><HelpDropdown /></div> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <div className={"font-semibold"} data-testid="Header-Menu-LanguageSelector"><LanguageSelector /></div> | ||
| </div> | ||
| <nav> | ||
| <ul className="flex space-x-10 items-center font-semibold" data-testid="Header-Menu-Elements"> | ||
| <li data-testid="Header-Menu-Home"> | ||
| <div data-testid="Header-Menu-Home-div" | ||
| onMouseDown={() => navigate("/") } | ||
| onKeyUp={() => navigate("/") } | ||
| role="button" | ||
| tabIndex={0} | ||
| className="text-iw-title cursor-pointer hidden sm:inline-block">{t("Header.home")}</div> | ||
| </li> | ||
| <li data-testid="Header-Menu-Help"> | ||
| <div className={" hidden sm:block font-semibold"} data-testid="Header-Menu-Help-div"><HelpDropdown/></div> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <div className={"font-semibold"} data-testid="Header-Menu-LanguageSelector"><LanguageSelector/></div> | ||
| </div> | ||
| { isOpen && | ||
| <OutsideClickHandler onOutsideClick={()=>setIsOpen(false)} > | ||
| <div className="container sm:hidden mx-auto px-4 flex flex-col justify-start items-start font-semibold" | ||
| role="button" | ||
| tabIndex={0} | ||
| onMouseDown={() => setIsOpen(false)} | ||
| onBlur={() => setIsOpen(false)}> | ||
| <div data-testid="Header-Menu-Help" | ||
| role="button" | ||
| tabIndex={0} | ||
| onKeyUp={() => {navigate("/help");setIsOpen(false)}} | ||
| onMouseDown={() => {navigate("/help");setIsOpen(false)}} | ||
| className="text-iw-title cursor-pointer py-5 w-full inline-block"> | ||
| {isOpen && | ||
| <OutsideClickHandler onOutsideClick={() => setIsOpen(false)} > | ||
| <div className="container sm:hidden mx-auto px-4 flex flex-col justify-start items-start font-semibold" | ||
| role="button" | ||
| tabIndex={0} | ||
| onMouseDown={() => setIsOpen(false)} | ||
| onBlur={() => setIsOpen(false)}> | ||
| <div data-testid="Header-Menu-Help" | ||
| role="button" | ||
| tabIndex={0} | ||
| onKeyUp={() => { navigate("/help"); setIsOpen(false) }} | ||
| onMouseDown={() => { navigate("/help"); setIsOpen(false) }} | ||
| className="text-iw-title cursor-pointer py-5 w-full inline-block"> | ||
| {t("Header.help")} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </OutsideClickHandler> | ||
| } | ||
| </div> | ||
| </OutsideClickHandler> | ||
| } | ||
| </div> | ||
| </header> | ||
| ) | ||
|
|
||
| } | ||
|
|
||
| } |