ready for initial presentation

src/components/Navbar.tsx

@@ -15,6 +15,22 @@ export interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
+  {
+    id: "members",
+    title: "Members",
+    children: [
+      {
+        id: "findMedicalProvider",
+        title: "Find a Medical Provider",
+        route: "",
+      },
+      {
+        id: "obtainRxInformation",
+        title: "Obtain Rx Information",
+        route: "",
+      },
+    ],
+  },
   {
     id: "employers",
     title: "Employers",
@@ -36,22 +52,6 @@ const menuItems: MenuItem[] = [
       },
     ],
   },
-  {
-    id: "members",
-    title: "Members",
-    children: [
-      {
-        id: "findMedicalProvider",
-        title: "Find a Medical Provider",
-        route: "",
-      },
-      {
-        id: "obtainRxInformation",
-        title: "Obtain Rx Information",
-        route: "",
-      },
-    ],
-  },
   {
     id: "providers",
     title: "Providers",
@@ -81,8 +81,10 @@ const Navbar = () => {
 
     useEffect(() => {
         const handleScroll = () => {
+            // const viewportHeight = window.innerHeight;
+            const subtractedHeight = window.innerHeight - 80;
             // Find pixels from top to bottom of "tag line" div
-            if (window.scrollY > 280) {
+            if (window.scrollY > subtractedHeight) {
                 setIsScrolled(true);
             } else {
                 setIsScrolled(false);
@@ -97,16 +99,16 @@ const Navbar = () => {
     }, []);
 
   return (
-    <nav className="sticky top-0 left-0 z-50 hidden lg:flex justify-center">
+    <nav className="sticky top-0 left-0 z-50 hidden lg:flex h-[85px] justify-center bg-transparent">
         <div className={classnames(
                     "w-11/12 bg-britton-neutral px-1 text-britton-dark rounded-b-3xl", {
-                        "min-h-6 pb-1 border-b-2 border-x-2 border-britton-dark" : isScrolled,
-                        "min-h-20 pb-4" : !isScrolled
+                        "h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
+                        "h-full pb-4" : !isScrolled
                     }
                 )}
         >
             <div className="container mx-auto justify-between items-center flex">
-                <div className={classnames('rounded-b-3xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
+                <div className={classnames('rounded-b-2xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
                     <Image
                         src="/images/bbstpa-forsite.png"
                         alt="Britton Logo"
@@ -114,7 +116,7 @@ const Navbar = () => {
                         height={60}
                     />
                 </div>
-                <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})}>
+                <div className={classnames('rounded-b-2xl py-2 mb-1 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
                     <Link href="/">
                         Britton Benefit Services
                     </Link>