Merge pull request #16 from du1ana/mobile-header

Added mobile responsive header

src/components/Headers/MobileMainHeader.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import CommonLayout from "../Layouts/CommonLayout";
+import menu from "../Menus/Menu";
+import ActiveMenu from "./ActiveMenu";
+
+const MobileMainHeader = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  return (
+    <header className="py-3 shadow-md">
+      <CommonLayout>
+        <div className="lg:flex justify-between items-center">
+          <div>
+            <img className="w-20" src="/assets/logo.svg" alt="RealMate" />
+          </div>
+          <div
+            className="fixed top-0 right-0 h-screen w-4/5 text-right lg:flex lg:items-center lg:space-x-4 lg:pr-4 px-3 py-3">
+            <button
+              className=" text-3xl focus:outline-none"
+              onClick={toggleMenu}
+            >
+              {menuOpen ? "X" : "☰"}
+            </button>
+            <ul className={`${menuOpen ? "text-right" : "hidden"
+              }`}>
+              {menu.main.items.map((item, index) => (
+                <li key={index} onClick={toggleMenu} className="py-2">
+                  <ActiveMenu path={item.path} menu={item.title} />
+                </li>
+              ))}
+              <br className="py-2" />
+              <li className="py-2">
+                <Link href={"signin"} onClick={toggleMenu}>
+                  <span>Sign in</span>
+                </Link>
+              </li>
+              <li className="py-2">
+                <Link href={"/register"} onClick={toggleMenu}>
+                  <span className="btn-grade-sm">Register</span>
+                </Link>
+              </li>
+            </ul>
+            {menuOpen &&
+              <div style={{ zIndex: -1, opacity: 0.9 }} className="fixed top-0 right-0 h-full w-full bg-gradient-to-l from-white from-40% to-tertiary"></div>
+            }
+          </div>
+        </div>
+      </CommonLayout>
+    </header>
+  );
+};
+
+export default MobileMainHeader;

src/pages/_app.js

@@ -1,5 +1,6 @@
 import Footer from '@/components/Footer/Footer'
 import MainHeader from '@/components/Headers/MainHeader'
+import MobileMainHeader from '@/components/Headers/MobileMainHeader'
 import '@/styles/globals.css'
 import '@/styles/tailwind.common.css'
 import Head from 'next/head'
@@ -11,7 +12,12 @@ export default function App({ Component, pageProps }) {
             <link rel="shortcut icon" href="/assets/favicon.svg" type="image/x-icon" />
         </Head>
         <main className='flex flex-col justify-between min-h-screen'>
-            <MainHeader />
+            <div className="lg:hidden">
+                <MobileMainHeader />
+            </div>
+            <div className="hidden lg:block">
+                <MainHeader />
+            </div>
             <Component {...pageProps} />
             <Footer />
         </main>

src/styles/tailwind.common.css

@@ -1,3 +1,7 @@
-.btn-grade{
+.btn-grade {
     @apply bg-gradient-to-b from-primary to-btngrad px-5 py-1 rounded-md text-white;
+}
+
+.btn-grade-sm {
+    @apply bg-gradient-to-b from-primary to-btngrad px-1 py-1 rounded-md text-white;
 }