Homepage first runthrough complete

src/components/Navbar.tsx

@@ -5,6 +5,63 @@ import classnames from 'classnames';
 import Link from 'next/link';
 import Button from './Button';
 import Image from 'next/image';
+import Dropdown from "./Dropdown";
+
+export interface MenuItem {
+  title: string;
+  route?: string;
+  children?: MenuItem[];
+}
+
+const menuItems: MenuItem[] = [
+  {
+    title: "Employers",
+    children: [
+      {
+        title: "Employer Services",
+        route: "",
+      },
+      {
+        title: "Self-Funded Plans",
+        route: "",
+      },
+      {
+        title: "Control Health Care Costs",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Members",
+    children: [
+      {
+        title: "Find a Medical Provider",
+        route: "",
+      },
+      {
+        title: "Obtain Rx Information",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Providers",
+    children: [
+      {
+        title: "Eligibility Lookup",
+        route: "",
+      },
+      {
+        title: "Contact BBS",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Brokers",
+    route: "",
+    },
+];
 
 const Navbar = () => {
 
@@ -45,19 +102,12 @@ const Navbar = () => {
                         height={80}
                     />
                 </div>
-                <div className={classnames('rounded-b-3xl py-2 bg-britton-dark text-britton-neutral text-center text-xl uppercase w-72', {"hidden" : !isScrolled})}>
+                <div className={classnames('rounded-b-3xl py-2 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
                     <Link href="/">
                         Britton Benefit Services
                     </Link>
                 </div>
-                {/* <div className={classnames(`bg-[url(/images/bbstpa-forsite.png)]`, {"hidden" : isScrolled})} /> */}
-                {/* <Image src="/images/bbstpa-forsite.png" alt="Britton Logo" className={classnames({"hidden" : isScrolled})}/> */}
-                {/* <div className={classnames("text-xl font-bold", {"hidden" : isScrolled})}>
-                    Britton <br />
-                    &nbsp;&nbsp;&nbsp;Benefit <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services
-                </div> */}
-                <ul className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
+                {/* <ul className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
                     <li>
                         <Link href="/services" className="hover:text-britton-light">
                             Employers
@@ -83,7 +133,19 @@ const Navbar = () => {
                             Contact Us
                         </Link>
                     </li>
-                </ul>
+                </ul> */}
+                <div className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
+                    {menuItems.map((item) => {
+                    return item.hasOwnProperty("children") ? 
+                    (
+                        <Dropdown item={item} />
+                    ) : (
+                        <Link className="hover:text-britton-light" href={item?.route || ""}>
+                            {item.title}
+                        </Link>
+                    );
+                    })}
+                </div>
                 <div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}>
                     <Button className="bg-britton-neutral text-britton-accent2 hover:text-britton-accent py-1 px-4 rounded border-1 border-britton-accent2 hover:border-britton-accent">
                         Sign In