responsive header

src/components/Header.css

@@ -0,0 +1,93 @@
+
+.nav-menu {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  text-align: center;
+  justify-content: center;
+}
+
+.nav-links {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  height: 100%;
+}
+
+.menu-icon {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .NavbarItems {
+    position: relative;
+  }
+
+  .nav-menu {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 90vh;
+    position: absolute;
+    top: 80px;
+    left: -100%;
+    opacity: 1;
+    transition: all 0.5s ease;
+  }
+
+  .nav-menu.active {
+    background: #1c2237;
+    left: 0;
+    opacity: 1;
+    transition: all 0.6s ease;
+    z-index: 1;
+  }
+
+  .nav-links {
+    text-align: center;
+    padding: 2rem;
+    width: 100%;
+    display: table;
+  }
+
+  .nav-links:hover {
+    color: #f00946;
+    transform: scale(1.2);
+    transition: all 0.3s ease;
+  }
+
+  .nav-item:hover {
+    border: none;
+  }
+
+  .nav-item {
+    width: 100%;
+  }
+
+  .navbar-logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(25%, 50%);
+  }
+
+  .menu-icon {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-100%, 60%);
+    font-size: 1.8rem;
+    cursor: pointer;
+  }
+
+  .nav-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+  }
+} 

src/components/Header.js

@@ -1,21 +1,57 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import './Header.css';
+import { FaBars, FaTimes } from 'react-icons/fa';
+import { IconContext } from 'react-icons/lib';
+
+function Header() {
+  const [click, setClick] = useState(false);
+  const [button, setButton] = useState(true);
+
+  const handleClick = () => setClick(!click);
+  const closeMobileMenu = () => setClick(false);
+
+  const showButton = () => {
+    if (window.innerWidth <= 960) {
+      setButton(false);
+    } else {
+      setButton(true);
+    }
+  };
+
+  useEffect(() => {
+    showButton();
+    window.addEventListener('resize', showButton);
+  }, []);
+
 
-const Header = () => {
   return (
-    <div className=' h-16 flex p-4 items-center justify-between '>
-      <div><img src={require('../assets/fandomDAO.png')} alt="Logo" width={50} height={100}/></div>
-      <div className='flex justify-between space-x-8'>
-        <a href='#home' className='underline'>Home</a>
-        <a href='#nft'>NFTs</a>
-        <a href="#about">About</a>
-        <a href='#contact'>Contact us</a>
-
-      </div>
-      <div>
-        <button className='text-white font-semibold rounded p-2  bg-gradient-to-r from-bluecolor via-purple-500 to-pinktext'>Connect Wallet</button>
-      </div>
-    </div>
+    <>
+      <IconContext.Provider value={{ color: '#d53f86' }}>
+        <nav class="flex sticky bg-[#0a111a] h-20 top-0 z-100 items-center justify-items-center text-[20px]">
+          <div class="flex justify-between h-20 z-[1] w-full max-w-screen-xl mx-auto px-[50px]">
+            <Link to='/' class="flex cursor-pointer items-center left-0 -ml-10" onClick={closeMobileMenu}>
+            <img src={require('./fandomDAO.png')} alt="Logo" width={50} height={100}/>
+            </Link>
+            <div className='menu-icon py-1' onClick={handleClick}>
+              {click ? <FaTimes /> : <FaBars />}
+            </div>
+            <ul className={click ? 'nav-menu active' : 'nav-menu'}>
+            <li className='nav-item rounded-md bg-gradient-to-r from-[#df3f86] to-[#6218a8]'>
+                <Link
+                  to='/contact'
+                  className='nav-links'
+                  onClick={closeMobileMenu}
+                >
+                  Coming Soon
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </IconContext.Provider>
+    </>
   );
-};
+}
 
-export default Header;
+export default Header;