react-icons/hi#HiMenuAlt4 JavaScript Examples

The following examples show how to use react-icons/hi#HiMenuAlt4. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Navbar.jsx    From js-code with ISC License 6 votes vote down vote up 
Navbar = () => {
    const [toggleMenu, setToggleMenu] = React.useState(false)

    return (
        <nav className="w-full flex md:justify-center justify-between items-center p-4">
            <div className="md:flex-[0.5] flex-initial justify-center items-center">
                <img src={logo} alt="logo" className="w-32 cursor-pointer" />
            </div>
            {/* <ul className="text-white md:flex hidden list-none flex-row justify-between items-center flex-initial">
                {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
                    <NavBarItem key={item + index} title={item} />
                ))}
                <li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]">
                    Login
                </li>
            </ul> */}
            <div className="flex relative">
                {!toggleMenu && (
                    <HiMenuAlt4
                        fontSize={28}
                        className="text-white md:hidden cursor-pointer"
                        onClick={() => setToggleMenu(true)}
                    />
                )}
                {toggleMenu && (
                    <AiOutlineClose
                        fontSize={28}
                        className="text-white md:hidden cursor-pointer"
                        onClick={() => setToggleMenu(false)}
                    />
                )}
                {toggleMenu && (
                    <ul
                        className="z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
            flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in"
                    >
                        <li className="text-xl w-full my-2">
                            <AiOutlineClose onClick={() => setToggleMenu(false)} />
                        </li>
                        {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
                            <NavBarItem key={item + index} title={item} classprops="my-2 text-lg" />
                        ))}
                    </ul>
                )}
            </div>
        </nav>
    )
}