Created responsive navbar

UoaWDCC · Jun 6, 2024 · 670e6d6 · 670e6d6
1 parent aaa7d53
commit 670e6d6
Showing 1 changed file with 66 additions and 62 deletions.
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -17,70 +17,74 @@ function Header() {
 
   return (
     <header className="w-full bg-[#034159] fixed top-0 z-50 shadow h-[90px] px-[15px] flex items-center justify-between">
-      <div className="justify-between lg:items-center lg:flex w-full">
-        <div className="flex items-center justify-between w-full lg:w-auto">
-          <a className="flex items-center" href="/">
-            <img
-              className="object-contain w-[70px] h-[70px]"
-              src={peacockLogo}
-              alt="Peacock Logo"
-            />
-            <img
-              className="object-contain w-[172px] h-[62px] ml-2"
-              src={whiteName}
-              alt="Logo Text"
-            />
-          </a>
-          <div className="lg:hidden">
-            <button onClick={() => setNavBar(!navBar)}>
-              {navBar ? (
-                <IoMdClose className="text-white" size={40} />
-              ) : (
-                <IoMdMenu className="text-white" size={40} />
-              )}
-            </button>
-          </div>
+      <div className="flex items-center justify-between w-full lg:w-auto">
+        <a className="flex items-center" href="/">
+          <img
+            className="object-contain w-[70px] h-[70px]"
+            src={peacockLogo}
+            alt="Peacock Logo"
+          />
+          <img
+            className="object-contain w-[172px] h-[62px] ml-2"
+            src={whiteName}
+            alt="Logo Text"
+          />
+        </a>
+        <div className="lg:hidden">
+          <button onClick={() => setNavBar(!navBar)}>
+            {navBar ? (
+              <IoMdClose className="text-white" size={40} />
+            ) : (
+              <IoMdMenu className="text-white" size={40} />
+            )}
+          </button>
         </div>
-        <nav
-          className={`lg:flex lg:items-center w-full lg:w-auto ${
-            navBar ? "block" : "hidden"
-          }`}
-        >
-          <ul className="flex flex-col text-white lg:flex-row items-center gap-8 text-xl">
-            {titles.map((label, index) => (
-              <li key={index}>
-                <Link
-                  to={label.page}
-                  className={`${
-                    pathname === label.page ? "font-bold" : "text-white"
-                  } hover:bg-[#05394d] px-3 py-2 rounded`}
-                  onClick={() => setNavBar(!navBar)}
-                >
-                  {label.title}
-                </Link>
-              </li>
-            ))}
-            <div className="flex flex-col lg:flex-row items-center gap-8 mt-4 lg:mt-0 lg:ml-8">
-              <a href="/login">
-                <button
-                  className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
-                  style={{ borderRadius: "10px" }}
-                >
-                  Log-in
-                </button>
-              </a>
-              <a href="/signup">
-                <button
-                  className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
-                  style={{ borderRadius: "10px" }}
-                >
-                  Sign-up
-                </button>
-              </a>
-            </div>
-          </ul>
-        </nav>
       </div>
+      <nav
+        className={`fixed top-0 right-0 h-full bg-[#034159] p-8 z-40 transform transition-transform ${
+          navBar ? "translate-x-0" : "translate-x-full"
+        } lg:static lg:transform-none lg:p-0 lg:bg-transparent lg:flex lg:items-center lg:w-auto`}
+      >
+        <button
+          className="absolute top-4 right-4 lg:hidden"
+          onClick={() => setNavBar(false)}
+        >
+          <IoMdClose className="text-white" size={40} />
+        </button>
+        <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-5 lg:mt-0 mt-10 text-xl text-white">
+          {titles.map((label, index) => (
+            <li key={index} className="list-none">
+              <Link
+                to={label.page}
+                className={`${
+                  pathname === label.page ? "font-bold" : ""
+                } hover:bg-[#05394d] px-3 py-2 rounded block lg:inline-block`}
+                onClick={() => setNavBar(false)}
+              >
+                {label.title}
+              </Link>
+            </li>
+          ))}
+          <div className="flex flex-col lg:flex-row items-center gap-8 mt-4 lg:mt-0 lg:ml-8">
+            <a href="/login">
+              <button
+                className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
+                style={{ borderRadius: "10px" }}
+              >
+                Log-in
+              </button>
+            </a>
+            <a href="/signup">
+              <button
+                className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
+                style={{ borderRadius: "10px" }}
+              >
+                Sign-up
+              </button>
+            </a>
+          </div>
+        </div>
+      </nav>
     </header>
   );
 }