Ft/creating-dynamic-navbar

.github/workflows/deployment.yml

@@ -79,7 +79,6 @@ jobs:
       #   run: ${{ steps.detect-package-manager.outputs.runner }} next export
       - name: Ensure output directory exists
         run: mkdir -p ./out
-
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

src/components/cards/LevelCard.tsx

@@ -18,7 +18,7 @@ const LevelCard = ({
   });
   return (
     <button
-      className={`${bgColor} rounded-lg border w-48 flex flex-col items-center justify-center h-16 cursor-pointer`}
+      className={`${bgColor} rounded-lg border w-44 flex flex-col items-center justify-center h-16 cursor-pointer`}
     >
       <p className="text-center text-base font-semibold">{title}</p>
       <p className="text-center text-xs font-medium">{description}</p>

src/components/cards/ResourceTypeCard.tsx

@@ -8,11 +8,11 @@ const ResourceTypeCard = ({ text, link }: { text: string; link: string }) => {
   return (
     <Link
       href={link}
-      className={`flex items-center h-9 justify-center rounded-lg border-2 border-black bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
+      className={`flex items-stretch justify-center rounded-lg  border-2 border-gray-500 bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
         pathname === link ? "bg-black text-white" : ""
       }`}
     >
-      {text}
+      <p className="w-42 text-center p-6">{text}</p>
     </Link>
   );
 };

src/components/cards/StepCard.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 const StepCard = ({ text }: { text: string }) => {
   return (
-    <button className="h-28 w-32 bg-[#f8cecc] border rounded-md border-[#b85450] hover:border-purple-500 cursor-pointer flex justify-center items-center">
-      <p className="text-xs text-center">{text}</p>
+    <button className="h-32 w-36 bg-[#f8cecc] border rounded-md border-[#b85450] hover:border-purple-500 cursor-pointer flex justify-center items-center">
+      <p className="text-lg text-center font-bold  leading-tight">{text}</p>
     </button>
   );
 };

src/components/header/JourneySection.tsx

@@ -4,28 +4,32 @@ import ForwardArrow from "../icons/ForwardArrow";
 
 const JourneySection = () => {
   return (
-    <div className="min-h-80">
+    <div className="">
       <p className="text-center text-gray-500 text-xl font-bold mb-3 ">
         Select Step in The Co-design Journey
       </p>
-      <div className="flex justify-center items-center">
-        <Card text="Design" />
-        <ForwardArrow />
-        <Card text="Stakeholder Mapping" />
-        <ForwardArrow />
-        <Card text="Needs Assessment" />
-        <ForwardArrow />
-        <Card text="Implementation" />
-        <ForwardArrow />
-        <Card text="M&E" />
-      </div>
+      <div className="h-full flex items-center -my-8">
+        <div className="">
+          <div className="flex justify-center items-center my-2">
+            <Card text="Design" />
+            <ForwardArrow />
+            <Card text="Stakeholder Mapping" />
+            <ForwardArrow />
+            <Card text="Needs Assessment" />
+            <ForwardArrow />
+            <Card text="Implementation" />
+            <ForwardArrow />
+            <Card text="M&E" />
+          </div>
 
-      <div className="mt-6 bg-gray-400 text-white flex justify-around  items-center min-h-10">
-        <p className="text-sm">Early Concept</p>
-        <p className="text-sm">{"->"}</p>
-        <p className="text-sm">Software Development</p>
-        <p className="text-sm">{"->"}</p>
-        <p className="text-sm">Action and testing</p>
+          <div className="m-2 p-3 bg-gray-400 text-white flex rounded-lg justify-around text-xl  items-center">
+            <p className="text-md font-semibold">Early Concept</p>
+            <p className="text-md font-semibold">{"->"}</p>
+            <p className="text-md font-semibold">Software Development</p>
+            <p className="text-md font-semibold">{"->"}</p>
+            <p className="text-md font-semibold">Action and testing</p>
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/header/PracticeSection.tsx

@@ -2,75 +2,83 @@ import React from "react";
 import Line from "../icons/Line";
 import LevelCard from "../cards/LevelCard";
 
-const PracticeSection = () => {
+const PracticeSection = ({ title }: { title: string }) => {
   return (
-    <div className="">
+    <div className="w-1/3">
       <p className="text-center text-gray-500 text-xl font-bold mb-3">
-        Select Level of Co-design Practice
+        {title}
       </p>
-      <div>
-        <div className="flex justify-center items-end w-fit gap-x-4">
-          <LevelCard
-            level={0}
-            title="Level 0"
-            description="Contextually Disconnected Design"
-          />
-          <p className="text-center text-xs max-w-48">
-            The minimum co-design method where community members or individuals
-            are consulted as customers on their needs, aspirations and desires,
-            including working within the existing socio-cultural, environmental,
-            and financial systems of focus communities. Often involves designing
-            for or on behalf of communities
-          </p>
-          <LevelCard
-            level={2}
-            title="Level 2"
-            description="Current Best Practice"
-          />
+      <div className="h-full flex items-center justify-center">
+        <div className="h-[20rem] -mt-4">
+          <div className="flex justify-center items-end w-fit gap-x-4">
+            <LevelCard
+              level={0}
+              title="Level 0"
+              description="Contextually Disconnected Design"
+            />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              The minimum co-design method where community members or
+              individuals are consulted as customers on their needs, aspirations
+              and desires, including working within the existing socio-cultural,
+              environmental, and financial systems of focus communities. Often
+              involves designing for or on behalf of communities
+            </p>
+            <LevelCard
+              level={2}
+              title="Level 2"
+              description="Current Best Practice"
+            />
 
-          <p className="text-center text-xs max-w-48">
-            Engaging in transformational knowledge exchanges that are led by
-            affected and at risk individuals and communities in order to
-            dismantle existing power structures that constrain co-design
-            processes
-          </p>
-        </div>
-
-        <div className="grid grid-cols-4 relative">
-          <div className="flex justify-center ">
-            <Line />
-          </div>
-          <div className="flex justify-center ">
-            <Line />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              Engaging in transformational knowledge exchanges that are led by
+              affected and at risk individuals and communities in order to
+              dismantle existing power structures that constrain co-design
+              processes
+            </p>
           </div>
-          <div className="flex justify-center ">
-            <Line />
+
+          <div className="grid grid-cols-4 relative">
+            <div className="flex justify-center rotate-180">
+              <Line />
+            </div>
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+            <div className="flex justify-center  rotate-180">
+              <Line />
+            </div>
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+            <div className="flex items-center border-4 absolute w-full top-[45%]">
+              <div className="h-[10px] w-full bg-[#dc2626] absolute"></div>
+              <div className="-right-4 absolute w-0 h-0 border-y-[15px] border-l-[30px] border-y-transparent border-l-[#dc2626] "></div>
+            </div>
           </div>
-          <div className="flex justify-center ">
-            <Line />
+          <div className="flex justify-between items-start w-fit- gap-x-4-">
+            <p className="text-center text-xs max-w-52 leading-tight">
+              These methods result in design without a current contextual
+              understanding of the community, designing systems that reinforce
+              cultural tropes and knowledge hierarchies, or in short design, for
+              a theoretically imagined community.
+            </p>
+            <LevelCard
+              level={1}
+              title="Level 1"
+              description="Basic Principle"
+            />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              Level 2 is where the methods of co-design work towards
+              inclusivity, understand FDPs as agents of change through
+              mobilising local resources and existing community-based structures
+              to support HE projects
+            </p>
+            <LevelCard
+              level={3}
+              title="Level 3"
+              description="Fighting the System"
+            />
           </div>
-
-          <div className="h-[10px] w-full bg-[#dc2626] absolute top-1/2"></div>
-        </div>
-        <div className="flex justify-between items-start w-fit- gap-x-4-">
-          <p className="text-center text-xs max-w-48">
-            These methods result in design without a current contextual
-            understanding of the community, designing systems that reinforce
-            cultural tropes and knowledge hierarchies, or in short design, for a
-            theoretically imagined community.
-          </p>
-          <LevelCard level={1} title="Level 1" description="Basic Principle" />
-          <p className="text-center text-xs max-w-48">
-            Level 2 is where the methods of co-design work towards inclusivity,
-            understand FDPs as agents of change through mobilising local
-            resources and existing community-based structures to support HE
-            projects
-          </p>
-          <LevelCard
-            level={3}
-            title="Level 3"
-            description="Fighting the System"
-          />
         </div>
       </div>
     </div>

src/components/header/ResourceSection.tsx

@@ -1,33 +1,25 @@
 import React, { memo } from "react";
 import ResourceTypeCard from "../cards/ResourceTypeCard";
-
-const ResourceSection = () => {
+import { NavLink } from "../../types/interfaces";
+interface Props {
+  navData: NavLink[];
+}
+const ResourceSection = ({ navData }: Props) => {
   return (
-    <div>
+    <div className="">
       <p className="text-center text-gray-500 text-xl font-bold mb-3">
         Select Type of Resources in The Co-Design Journey
       </p>
-      <div className="bg-[#e6e6e6] border-2 border-black grid grid-cols-2 gap-8 rounded-2xl shadow-2xl p-4 mx-auto">
-        {[
-          {
-            text: "Basic Resources",
-            link: "/basic-resources",
-          },
-          {
-            text: "Advanced Resources",
-            link: "/",
-          },
-          {
-            text: "Tools Resources",
-            link: "/tools-resources",
-          },
-          {
-            text: "Case Studies & CORE Toolkits",
-            link: "/case-studies-and-core-tools",
-          },
-        ].map((item) => (
-          <ResourceTypeCard key={item.text} text={item.text} link={item.link} />
-        ))}
+      <div className="h-full flex -mt-8">
+        <div className="bg-[#e6e6e6] border-2 border-gray-500 grid grid-cols-2 gap-8 rounded-2xl shadow-2xl p-10 m-auto">
+          {navData.map((item) => (
+            <ResourceTypeCard
+              key={item.text}
+              text={item.text}
+              link={item.link}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

src/components/header/index.tsx

@@ -1,27 +1,53 @@
 import React from "react";
-import Image from "next/image";
 import ResourceSection from "./ResourceSection";
 import PracticeSection from "./PracticeSection";
 import JourneySection from "./JourneySection";
+import { navData } from "../utils/NavLink";
+import { usePathname } from "next/navigation";
+import HorzontalArrow from "../icons/HorzontalArrow";
+import SmallArrow from "../icons/SmallArrow";
 
 export const Header = () => {
+  const pathname = usePathname();
+
+  let title = "";
+
+  switch (pathname) {
+    case "/":
+      title = "Select Level of Co-design Practice";
+      break;
+    case "/case-studies-and-core-tools":
+      title = "Explore Case Studies and Core Tools";
+      break;
+    default:
+      title = "";
+      break;
+  }
+
+  if (pathname === "/basic-resources")
+    return (
+      <div className="flex h-[32rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+        <ResourceSection navData={navData} />
+        <HorzontalArrow />
+        <JourneySection />
+      </div>
+    );
+
+  if (pathname === "/case-studies-and-core-tools" || pathname === "/")
+    return (
+      <div className="flex  h-[32rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+        <ResourceSection navData={navData} />
+
+        <SmallArrow />
+        <PracticeSection title={title} />
+        <SmallArrow />
+        <JourneySection />
+      </div>
+    );
+
   return (
-    <div className="flex flex-wrap justify-between items-center  gap-y-24 border-b-8 border-dashed px-8 mx-auto">
-      <ResourceSection />
-      <Image
-        src="./images/smallArrow.png"
-        alt="arrow"
-        width={100}
-        height={100}
-      />
-      <PracticeSection />
-      <Image
-        src="./images/smallArrow.png"
-        alt="arrow"
-        width={100}
-        height={100}
-      />
-      <JourneySection />
+    <div className="flex  h-[32rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+      <ResourceSection navData={navData} />
     </div>
   );
 };

src/components/icons/HorzontalArrow.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+const HorzontalArrow = () => {
+  return (
+    <div className="flex m-auto">
+      <svg
+        width="574"
+        height="110"
+        viewBox="0 0 574 110"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="1"
+          y="35.301"
+          width="482.651"
+          height="39.3979"
+          fill="#FFFF33"
+          stroke="black"
+          stroke-width="2"
+        />
+        <path
+          d="M474.319 10.2393L533.746 54.81L476.503 100.469L474.319 10.2393Z"
+          fill="#FFFF33"
+          stroke="black"
+          stroke-width="2"
+        />
+        <rect x="2" y="36" width="486" height="38" fill="#FFFF33" />
+      </svg>
+    </div>
+  );
+};
+
+export default HorzontalArrow;