fix: header

rocket-connect · Aug 21, 2023 · 1ec323f · 1ec323f
1 parent e656da2
commit 1ec323f
Showing 1 changed file with 49 additions and 19 deletions.
diff --git a/frontend/src/components/views/Header.tsx b/frontend/src/components/views/Header.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from "react";
 import { Container } from "../utils/Container";
 import { Logo } from "../utils/Logo";
-import { Navbar } from "flowbite-react";
 
 interface NavItemProps {
   href: string;
@@ -31,28 +30,59 @@ 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>
-        <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>
+        <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>
       </Container>
     </div>
   );