feat(dashboard): update summary links (#21)

* feat: prepare component * feat: prepare component * feat: update summary links * fix: build --------- Co-authored-by: Thomas Catinaud Taris <[email protected]> Co-authored-by: Malena Guallar <[email protected]>
dataforgoodfr · May 24, 2024 · f598aad · f598aad
1 parent ecd704a
commit f598aad
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 28 deletions.
diff --git a/public/images/bottom-dark.svg b/public/images/bottom-dark.svg
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -19,6 +19,7 @@ const DashboardChart = dynamic(() => import("@/components/DashboardChart"), {
 
 const summary: SummaryLinksProps = [
   {
+    id: "intro",
     title: "Intro",
     sublinks: [
       {
@@ -40,6 +41,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "company",
     title: "Entreprises",
     sublinks: [
       {
@@ -61,6 +63,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "biondiversity",
     title: "Biodiversité",
     sublinks: [
       {
@@ -74,6 +77,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "health",
     title: "Human health",
     sublinks: [
       {
@@ -87,6 +91,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "animals",
     title: "Bien être animal",
     sublinks: [
       {
@@ -100,6 +105,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "climate",
     title: "Climat",
     sublinks: [
       {
@@ -109,6 +115,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "social",
     title: "Social",
     sublinks: [
       {
@@ -118,6 +125,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "alternative",
     title: "Alternatives",
     sublinks: [
       {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Metadata } from "next";
 import { Barlow_Condensed, Montserrat } from "next/font/google";
 import * as React from "react";
@@ -60,7 +61,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="fr" className={`${barlow.variable} ${montserrat.variable}`}>
+    <html
+      lang="fr"
+      className={clsx(barlow.variable, montserrat.variable, "scroll-smooth")}
+    >
       <body>
         <Navbar />
         <main>{children}</main>

diff --git a/src/components/IntroBlock.tsx b/src/components/IntroBlock.tsx
@@ -19,11 +19,11 @@ const IntroBlock = ({
     <header
       className={clsx(
         className,
-        "flex p-6 lg:p-12 text-red1 bg-pink1",
-        image ? "h-screen min-h-[300px]" : "min-h-[660px]",
+        "flex p-6 lg:p-12 text-red1 bg-pink1 min-h-[300px]",
+        image ? "h-screen min-h-[300px]" : "lg:pt-60",
       )}
     >
-      <div className="grid grid-rows-[1fr, auto, 1fr] w-full">
+      <div className="grid grid-rows-[1fr, auto, 1fr] w-full max-w-[1500px] mx-auto">
         {image && (
           <Image
             src="/images/salmon.svg"

diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
@@ -1,7 +1,9 @@
 import clsx from "clsx";
-import React from "react";
+import Image from "next/image";
+import React, { useState } from "react";
 
 export type SummaryLinksProps = {
+  id: string;
   title: string;
   sublinks: {
     label: string;
@@ -16,35 +18,78 @@ const Summary = ({
   className?: string;
   links: SummaryLinksProps;
 }) => {
+  const [openMenu, setOpenMenu] = useState("");
+  const handleClickLink = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+    id: string,
+  ) => {
+    e.preventDefault();
+    setOpenMenu(openMenu === id ? "" : id);
+  };
+
   if (!links) {
     return <></>;
   }
 
   return (
-    <div className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}>
-      <div className="max-w-[1500px] mx-auto">
-        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 gap-y-8 lg:gap-y-14">
-          {links.map((link, keyLink) => (
-            <li key={`link-${keyLink}`}>
-              <p className="h4 pb-6 text-red1">{link.title}</p>
+    <nav
+      className={clsx(className, "p-6 lg:p-12 text-red1 bg-pink1")}
+      aria-label="page"
+    >
+      <ul
+        role="menubar"
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 max-w-[1500px] mx-auto bg-white text-darkblue1 rounded-md"
+      >
+        {links.map((link, keyLink) => (
+          <li role="none" className="flex-1 relative" key={`link-${keyLink}`}>
+            <a
+              role="menuitem"
+              aria-haspopup="true"
+              aria-expanded={openMenu === link.id}
+              href={`#${link.sublinks[0].targetId}`}
+              onClick={(e) => handleClickLink(e, link.id)}
+              className={clsx(
+                "min-w-max flex justify-between p-4 hover:bg-red1 hover:text-white",
+                openMenu === link.id ? "bg-red1 text-white" : "",
+              )}
+            >
+              {link.title}
+              <Image
+                src="/images/bottom-dark.svg"
+                alt=""
+                width="10"
+                height="7"
+                className="ml-2"
+              />
+            </a>
 
-              <ul className="space-y-4">
-                {link.sublinks.map((sublink, keySubLink) => (
-                  <li key={`link-${keyLink}-${keySubLink}`}>
-                    <a
-                      href={`#${sublink.targetId}`}
-                      className="block p-4 md:px-8 md:py-5 bg-white text-darkblue1 font-bold text-xl hover:bg-red1"
-                    >
-                      {sublink.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
+            <ul
+              role="menu"
+              className={clsx(
+                "sm:absolute z-10 w-full bg-white",
+                openMenu === link.id ? "block" : "hidden",
+              )}
+              aria-label={link.title}
+            >
+              {link.sublinks.map((sublink, keySubLink) => (
+                <li key={`link-${keyLink}-${keySubLink}`}>
+                  <a
+                    href={`#${sublink.targetId}`}
+                    role="menuitem"
+                    className="block p-2 hover:text-red1"
+                    onClick={() => {
+                      setOpenMenu("");
+                    }}
+                  >
+                    {sublink.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
   );
 };
 export default Summary;