Merge pull request Yadav106#10 from Yadav106/staging

Staging

app/components/Header/Hamburger.css

@@ -0,0 +1,51 @@
+    .menu-btn-1 {
+        height: 5;
+        width: 5px;
+        cursor: pointer;
+    }
+
+    .menu-btn-1 span,
+    .menu-btn-1 span::before,
+    .menu-btn-1 span::after {
+        background: white;
+        border-radius: 2px;
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 2px;
+
+        -webkit-transition: .3s ease-in-out;
+        -moz-transition: .3s ease-in-out;
+        -o-transition: .3s ease-in-out;
+        transition: .3s ease-in-out;
+    }
+
+    .menu-btn-1 span::before {
+        margin-top: -6px;
+    }
+
+    .menu-btn-1 span::after {
+        margin-top: 6px;
+    }
+
+    .menu-btn-1.active span {
+        background: transparent;
+    }
+
+    .menu-btn-1.active span::before {
+        margin-top: 0;
+
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+
+    .menu-btn-1.active span::after {
+        margin-top: 0;
+
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+    }

app/components/Header/Header.jsx

@@ -1,6 +1,69 @@
-import "./Header.css";
+"use client";
+import { useState } from "react";
+import "./Hamburger.css";
+
 const Header = () => {
-  return <></>;
+  const [isActive, setIsActive] = useState(false);
+
+  function toggleActive() {
+    setIsActive(!isActive);
+  }
+
+  return (
+    <>
+      <div className="text-gray-50 w-full p-4 md:p-6 flex justify-between items-center">
+        <div className="flex md:mx-12 items-center gap-2">
+          <a href="#" className="logo">
+            <img
+              className="w-4/5 md:w-full"
+              src="/gdsc-logo.svg"
+              alt="gdsc-logo"
+            />
+          </a>
+          <h1 className="hidden md:block font-bold">GDSC-TCET</h1>
+        </div>
+        <ul className="hidden list-none gap-12 my-4 md:mx-12 text-xs md:flex items-center justify-between">
+          <li>
+            <a href="#">Home</a>
+          </li>
+          <li>
+            <a href="#">Contact</a>
+          </li>
+          <li>
+            <a href="#">FAQs</a>
+          </li>
+        </ul>
+        <div
+          className={`menu-btn-1 md:hidden mx-6 z-20 ${
+            isActive ? "active" : ""
+          }`}
+          onClick={toggleActive}>
+          <span></span>
+        </div>
+      </div>
+      {isActive && <HamBurger />}
+    </>
+  );
 };
 
 export default Header;
+
+const HamBurger = () => {
+  return (
+    <>
+      <div className="absolute mt-2 rounded-lg border border-gray-50/20 z-10 bg-gray-950/90 drop-shadow-2xl backdrop-filter backdrop-blur-[6px] w-[290px] p-2">
+        <ul className="list-none gap-12 my-4 text-xs flex flex-col items-center justify-between">
+          <li>
+            <a href="#">Home</a>
+          </li>
+          <li>
+            <a href="#">Contact</a>
+          </li>
+          <li>
+            <a href="#">FAQs</a>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",