Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dashboard): update summary links #21

Merged
merged 5 commits into from
May 24, 2024
Merged

feat(dashboard): update summary links #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fb22593
feat: prepare component
May 15, 2024
c6aa2fa
feat: prepare component
May 15, 2024
e5601e2
feat: update summary links
May 22, 2024
a3e0652
fix: build
May 22, 2024
739e255
Merge branch 'dashboard-summary-v2' of github.com:dataforgoodfr/12_pi…
Malena-Guallar May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/images/bottom-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const DashboardChart = dynamic(() => import("@/components/DashboardChart"), {

const summary: SummaryLinksProps = [
{
id: "intro",
title: "Intro",
sublinks: [
{
Expand All @@ -41,6 +42,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "company",
title: "Entreprises",
sublinks: [
{
Expand All @@ -62,6 +64,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "biondiversity",
title: "Biodiversité",
sublinks: [
{
Expand All @@ -75,6 +78,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "health",
title: "Human health",
sublinks: [
{
Expand All @@ -88,6 +92,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "animals",
title: "Bien être animal",
sublinks: [
{
Expand All @@ -101,6 +106,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "climate",
title: "Climat",
sublinks: [
{
Expand All @@ -110,6 +116,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "social",
title: "Social",
sublinks: [
{
Expand All @@ -119,6 +126,7 @@ const summary: SummaryLinksProps = [
],
},
{
id: "alternative",
title: "Alternatives",
sublinks: [
{
Expand Down
6 changes: 5 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/IntroBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
93 changes: 69 additions & 24 deletions src/components/Summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Loading