<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>
            <ul class="hidden lg:flex flex-col md:flex-row justify-end" id="submenu">
                <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>
<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
                            id="menu"
                            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>
                    <ul
                        className={`${
                            menu ? "lg:flex" : "hidden"
                        } flex-col md:flex-row w-full lg:w-8/12 justify-end`}
                        id="submenu"
                    >
                        <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>
    );
}

export default Header;