Merge pull request #102 from ScilifelabDataCentre/dropdown-update

Dropdown update

next-app/src/components/HeaderComponent.tsx

@@ -4,37 +4,41 @@ import { ILink } from "@/interfaces/types";
 import { LINK_CLASSES } from "@/constants";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import clsx from "clsx";
 
-export default function HeaderComponent() {
+const HeaderComponent = React.memo(() => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const pathname = usePathname();
 
   const links: { [id: string]: ILink } = {
     l3: {
-      text: "Access clinical data",
-      classes: LINK_CLASSES,
-      link: "/accessclinicaldata",
-    },
-    l4: {
       text: "KIARVA dashboard",
       classes: LINK_CLASSES,
       link: "/kiarva",
     },
-    l5: { text: "Contact", classes: LINK_CLASSES, link: "/contact" },
-    l6: { text: "About us", classes: LINK_CLASSES, link: "/about/product" },
+    l4: { text: "Contact", classes: LINK_CLASSES, link: "/contact" },
+    l5: { text: "About us", classes: LINK_CLASSES, link: "/about/product" },
   };
 
   const dropdownLinks = [
+    { text: "Access clinical data", link: "/accessclinicaldata" },
     { text: "Quality registries", link: "/registries" },
     { text: "Swedish research projects", link: "/swedishresearchprojects" },
     { text: "Other data sources", link: "/datasources" },
   ];
 
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev);
+  }, []);
+
+  const toggleDropdown = useCallback(() => {
+    setIsDropdownOpen((prev) => !prev);
+  }, []);
+
   return (
-    <div className="bg-gradient-to-b from-secondary to-primary">
+    <header className="bg-gradient-to-b from-secondary to-primary">
       <div className="text-white 2xl:max-w-screen-2xl 2xl:mx-auto">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between py-4 px-6">
           <div className="flex justify-between items-center">
@@ -47,7 +51,7 @@ export default function HeaderComponent() {
             </Link>
             <button
               className="lg:hidden text-white focus:outline-none"
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              onClick={toggleMenu}
             >
               <svg
                 className="h-6 w-6"
@@ -74,15 +78,16 @@ export default function HeaderComponent() {
             </button>
           </div>
           <nav
-            className={`${
-              isMenuOpen ? "block" : "hidden"
-            } lg:block mt-4 lg:mt-0`}
+            className={clsx(
+              isMenuOpen ? "block" : "hidden",
+              "lg:block mt-4 lg:mt-0"
+            )}
           >
             <ul className="flex flex-col lg:flex-row lg:space-x-6 space-y-2 lg:space-y-0 text-lg">
               <li className="relative">
                 <button
                   className="flex items-center text-white focus:outline-none"
-                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  onClick={toggleDropdown}
                 >
                   Data sources
                   <svg
@@ -101,11 +106,14 @@ export default function HeaderComponent() {
                   </svg>
                 </button>
                 {isDropdownOpen && (
-                  <ul className="absolute left-0 mt-2 w-40 bg-white text-black py-1 rounded-lg shadow-lg z-10">
+                  <ul className="absolute left-0 mt-2 w-48 bg-white text-black py-2 rounded-lg shadow-md z-10">
                     {dropdownLinks.map((link, index) => (
                       <li key={index}>
                         <Link
-                          className="block px-3 py-1 text-sm hover:bg-gray-200 rounded"
+                          className={clsx(
+                            "block px-4 py-2 text-sm transition-colors duration-200 hover:bg-gray-100 rounded",
+                            index !== 0 && "pl-8"
+                          )}
                           href={link.link}
                           onClick={() => setIsDropdownOpen(false)}
                         >
@@ -135,6 +143,10 @@ export default function HeaderComponent() {
           </nav>
         </div>
       </div>
-    </div>
+    </header>
   );
-}
+});
+
+HeaderComponent.displayName = "HeaderComponent";
+
+export default HeaderComponent;