<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;
<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)">
Sign In
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</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
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>
<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="#">
Sign In
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 inline-block ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 5l7 7-7 7"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
);
};
export default Header;
<div class="bg-gray-100 border-t-4 border-indigo-600">
<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)">Sign In</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Register</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="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 border-t-4 border-indigo-600">
<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 w-full lg:w-8/12 md:flex-row justify-end`}
id="submenu"
>
<li>
<a className="p-4 block" href="#">
Sign In
</a>
</li>
<li>
<a className="p-4 block" href="#">
Register
</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="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;
<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)">Sign In</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Register</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="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="javascript:void(0)">
Sign In
</a>
</li>
<li>
<a className="p-4 block" href="javascript:void(0)">
Register
</a>
</li>
<li>
<a className="p-4 block" href="javascript:void(0)">
<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="javascript:void(0)">
<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;
<div class="bg-gray-100 border-t-4 border-indigo-600">
<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 border-t-4 border-indigo-600">
<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"
} hidden lg:flex flex-col md:flex-row 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;
<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;