fix: header

rocket-connect · Aug 21, 2023 · e656da2 · e656da2
1 parent 502b4f0
commit e656da2
Showing 1 changed file with 19 additions and 49 deletions.
diff --git a/frontend/src/components/views/Header.tsx b/frontend/src/components/views/Header.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { Container } from "../utils/Container";
 import { Logo } from "../utils/Logo";
+import { Navbar } from "flowbite-react";
 
 interface NavItemProps {
   href: string;
@@ -30,59 +31,28 @@ function NavItem({ href, children, dropdownId }: NavItemProps) {
   );
 }
 
-interface DropdownItemProps {
-  title: string;
-  children: ReactNode[];
-}
-
 export function Header() {
   return (
     <div className="bg-white fixed w-full py-2 bg-rocket-connect-lightgrey">
       <Container>
-        <nav>
-          <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-2">
-            <a href="#" className="flex items-center">
-              <span className="w-8">
-                <Logo />
-              </span>
-              <span className="ml-5 self-center font-bold italic whitespace-nowrap text-rocket-connect-darkblue">
-                Rocket Connect
-              </span>
-            </a>
-            <button
-              data-collapse-toggle="navbar-dropdown"
-              type="button"
-              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-rocket-connect-darkblue rounded-lg md:hidden"
-              aria-controls="navbar-dropdown"
-            >
-              <svg
-                className="w-5 h-5"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 17 14"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 1h15M1 7h15M1 13h15"
-                />
-              </svg>
-            </button>
-            <div
-              className={`w-full md:block md:w-auto md:pl-5`}
-              id="navbar-dropdown"
-            >
-              <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0">
-                <NavItem href="#home">Home</NavItem>
-                <NavItem href="#contact">Contact</NavItem>
-                <NavItem href="#services">Services</NavItem>
-              </ul>
-            </div>
-          </div>
-        </nav>
+        <Navbar fluid rounded>
+          <Navbar.Brand as="a" href="#" className="flex items-center">
+            <span className="w-8">
+              <Logo />
+            </span>
+            <span className="ml-5 self-center font-bold italic whitespace-nowrap text-rocket-connect-darkblue">
+              Rocket Connect
+            </span>
+          </Navbar.Brand>
+          <Navbar.Toggle className="text-rocket-connect-darkblue" />
+          <Navbar.Collapse>
+            <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 text-base">
+              <NavItem href="#home">Home</NavItem>
+              <NavItem href="#contact">Contact</NavItem>
+              <NavItem href="#services">Services</NavItem>
+            </ul>
+          </Navbar.Collapse>
+        </Navbar>
       </Container>
     </div>
   );