Merge pull request #2 from she-code-africa/layout-setup

update(navbar): make the dropdown functional
she-code-africa · May 29, 2024 · 91ac9c3 · 91ac9c3
2 parents b10437f + dfc4848
commit 91ac9c3
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 16 deletions.
diff --git a/src/components/navbar/MenuLinks.jsx b/src/components/navbar/MenuLinks.jsx
@@ -1,25 +1,46 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-import { FaAngleDown } from "react-icons/fa6";
+import { FaAngleDown, FaAngleUp } from "react-icons/fa6";
 
-const MenuLinks = ({ menuItem }) => {
+const MenuLinks = ({ menuItem, isOpen, onToggle }) => {
   const { pathname } = useLocation();
 
   return (
     <>
       {menuItem.isDropdown ? (
-        <li
-          className={`text-base font-medium cursor-pointer relative ${
-            pathname === menuItem.path && "text-primaryPink font-bold"
-          }`}
-        >
-          <Link to={menuItem.path} className="flex gap-1 items-center">
-            <span className="">{menuItem.pathname}</span>
-            <button className="">
-              <FaAngleDown />
-              {/* {showDropdown ? <FaAngleUp /> : <FaAngleDown />} */}
+        <li className={`text-base font-medium cursor-pointer relative `}>
+          <span
+            className={`flex gap-1 items-center ${
+              pathname === menuItem.path && "text-primaryPink font-bold"
+            }`}
+          >
+            <Link to={menuItem.path}>
+              <span className="">{menuItem.pathname}</span>
+            </Link>
+            <button className="" onClick={onToggle}>
+              {isOpen ? <FaAngleUp /> : <FaAngleDown />}
             </button>
-          </Link>
+          </span>
+
+          {isOpen && (
+            <>
+              <ul className="lg:absolute bg-white left-0 lg:w-max p-4 flex flex-col gap-3">
+                {menuItem.dropdownMenu.map((menu, i) => (
+                  <li className="text-sm hover:text-primaryPink" key={i}>
+                    <Link
+                      to={menu.url}
+                      className={`pb-4 ${
+                        pathname === menu.url &&
+                        "border-b-2 border-b-primaryPink"
+                      }`}
+                    >
+                      {menu.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
         </li>
       ) : (
         <li

diff --git a/src/components/navbar/index.jsx b/src/components/navbar/index.jsx
@@ -7,6 +7,7 @@ import MenuLinks from "./MenuLinks";
 
 const NavigationBar = () => {
   const [isNavOpen, setIsNavOpen] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(null);
 
   return (
     <nav className="fixed top-0 right-0 left-0 bg-white py-5 drop-shadow-md text-sealBrown font-mulish">
@@ -33,7 +34,12 @@ const NavigationBar = () => {
         >
           <ul className="w-[90%] max-w-[1280px] gap-6 mx-auto lg:mx-0 lg:max-w-full flex flex-col lg:flex-row lg:gap-10 lg:w-full justify-center py-10 lg:py-0">
             {navigationMenu.map((menu, i) => (
-              <MenuLinks key={i} menuItem={menu} />
+              <MenuLinks
+                key={i}
+                menuItem={menu}
+                isOpen={showDropdown === i}
+                onToggle={() => setShowDropdown(showDropdown === i ? null : i)}
+              />
             ))}
           </ul>
         </div>

diff --git a/src/utils/appData.js b/src/utils/appData.js
@@ -9,7 +9,20 @@ export const navigationMenu = [
     pathname: "Activities",
     path: "/activities",
     isDropdown: true,
-    dropdownMenu: ["item1", "item2", "item3"],
+    dropdownMenu: [
+      {
+        title: "Game Development",
+        url: "/activities/game-development",
+      },
+      {
+        title: "Coding",
+        url: "/activities/coding",
+      },
+      {
+        title: "Robotis",
+        url: "/activities/robotics",
+      },
+    ],
   },
   {
     pathname: "STEM Club",
@@ -21,7 +34,20 @@ export const navigationMenu = [
     pathname: "Outreach",
     path: "/outreach",
     isDropdown: true,
-    dropdownMenu: ["item", "item1", "item1"],
+    dropdownMenu: [
+      {
+        title: "Outreach",
+        url: "#",
+      },
+      {
+        title: "Outreach",
+        url: "#",
+      },
+      {
+        title: "Outreach",
+        url: "#",
+      },
+    ],
   },
 ];