<div class="bg-gray-100">
    <div class="container mx-auto">
        <div class="py-4 px-4 flex flex-row justify-between flex-wrap">
            <a href="javascript:void(0)" class="block px-2 py-4 lg:w-3/12 font-bold text-gray-800 text-xl uppercase tracking-wider">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 inline-block mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
                </svg>
                DRYCOMPONENTS
            </a>
            <div class="block lg:hidden text-right py-4 mt-1">
                <button id="menu" onclick="showMenu()" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
            <div class="hidden lg:flex flex-col lg:flex-row justify-between w-full lg:w-8/12 overflow-y-auto" id="submenu">
                <ul class=" lg:flex flex-col md:flex-row justify-end">
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">Products</a>
                    </li>
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">Solutions</a>
                    </li>
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">Developers</a>
                    </li>
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">Resources</a>
                    </li>
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">Pricing</a>
                    </li>
                </ul>
                <ul class="lg:flex flex-col md:flex-row justify-end">
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <span class="block lg:hidden">Search</span>
                        </a>
                    </li>
                    <li>
                        <a class="p-4 block" href="javascript:void(0)">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                            </svg>
                            <span class="block lg:hidden">Cart</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    function showMenu() {
        document.getElementById("submenu").classList.toggle("hidden");
    }
</script>

                

                    import { useState, useEffect } from "react";

const Header = () => {
    const [menu, setMenu] = useState(true);
    window.addEventListener("resize", handleScreenChange);
    useEffect(handleScreenChange, []);

    function handleScreenChange() {
        const { innerWidth } = window;
        if (innerWidth < 900 && !menu) {
            setMenu(false);
        } else {
            setMenu(true);
        }
    }

    return (
        <div className="bg-gray-100">
            <div className="container mx-auto">
                <div className="py-4 px-4 flex flex-row justify-between flex-wrap">
                    <a
                        href="#"
                        className="block px-2 py-4 lg:w-3/12 font-bold text-gray-800 text-xl uppercase tracking-wider"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            strokeWidth={1.5}
                            stroke="currentColor"
                            className="h-6 w-6 inline-block mr-2"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
                            />
                        </svg>
                        DRYCOMPONENTS
                    </a>
                    <div className="block lg:hidden text-right py-4 mt-1">
                        <button onClick={() => setMenu(!menu)} type="button">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-6 w-6"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                strokeWidth={2}
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M4 6h16M4 12h16m-7 6h7"
                                />
                            </svg>
                        </button>
                    </div>
                    <div
                        className={`${
                            menu ? "lg:flex" : "hidden"
                        } flex-col lg:flex-row justify-between w-full lg:w-8/12 overflow-y-auto`}
                        id="submenu"
                    >
                        <ul className=" lg:flex flex-col md:flex-row justify-end">
                            <li>
                                <a className="p-4 block" href="#">
                                    Products
                                </a>
                            </li>
                            <li>
                                <a className="p-4 block" href="#">
                                    Solutions
                                </a>
                            </li>
                            <li>
                                <a className="p-4 block" href="#">
                                    Developers
                                </a>
                            </li>
                            <li>
                                <a className="p-4 block" href="#">
                                    Resources
                                </a>
                            </li>
                            <li>
                                <a className="p-4 block" href="#">
                                    Pricing
                                </a>
                            </li>
                        </ul>
                        <ul className="lg:flex flex-col md:flex-row justify-end">
                            <li>
                                <a className="p-4 block" href="#">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        className="h-6 w-6 hidden lg:block"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke="currentColor"
                                        strokeWidth={2}
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                                        />
                                    </svg>
                                    <span className="block lg:hidden">
                                        Search
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a className="p-4 block" href="#">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        className="h-6 w-6 hidden lg:block"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke="currentColor"
                                        strokeWidth={2}
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                                        />
                                    </svg>
                                    <span className="block lg:hidden">
                                        Cart
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Header;