diff --git a/src/app/components/CustomHeader.tsx b/src/app/components/CustomHeader.tsx deleted file mode 100644 index acace9045..000000000 --- a/src/app/components/CustomHeader.tsx +++ /dev/null @@ -1,87 +0,0 @@ -"use client" - -import { fr } from "@codegouvfr/react-dsfr" -import { Header } from "@codegouvfr/react-dsfr/Header"; - -export default function CustomHeader() { - return ( -
- LA FABRIQUE -
- DES MINISTÈRES SOCIAUX - - } - homeLinkProps={{ - href: "/", - title: "Accueil - Nom de l'entité (ministère, secrétariat d'état, gouvernement)", - }} - id="fr-header-header-with-quick-access-items-nav-items-and-search-engine" - navigation={[ - { - linkProps: { - href: "#", - target: "_self", - }, - text: "accès direct", - }, - { - isActive: true, - linkProps: { - href: "#", - target: "_self", - }, - text: "accès direct", - }, - { - linkProps: { - href: "#", - target: "_self", - }, - text: "accès direct", - }, - { - linkProps: { - href: "#", - target: "_self", - }, - text: "accès direct", - }, - ]} - onSearchButtonClick={function noRefCheck(event) { - console.log("onSearchButtonClick", event); - }} - quickAccessItems={[ - { - iconId: "fr-icon-add-circle-line", - linkProps: { - href: "#", - }, - text: "Créer un espace", - }, - { - iconId: "fr-icon-lock-line", - linkProps: { - href: "#", - }, - text: "Se connecter", - }, - { - iconId: "fr-icon-account-line", - linkProps: { - href: "#", - }, - text: "S’enregistrer", - }, - ]} - serviceTagline="Un incubateur betagouv 🥸" - serviceTitle="La Fabrique des Ministères Sociaux" - // operatorLogo={{ - // alt: "[À MODIFIER - texte alternatif de l’image]", - // imgUrl: "static/media/placeholder.9x16.bb7c62f0.png", - // orientation: "horizontal", - // }} - /> - ); -} diff --git a/src/app/components/HeaderAndFooter.tsx b/src/app/components/HeaderAndFooter.tsx new file mode 100644 index 000000000..1ff77ae9e --- /dev/null +++ b/src/app/components/HeaderAndFooter.tsx @@ -0,0 +1,178 @@ +import { Footer as DSFRFooter, type FooterProps } from "@codegouvfr/react-dsfr/Footer"; +import { Header as DSFRHeader } from "@codegouvfr/react-dsfr/Header"; +import { MainNavigation, type MainNavigationProps } from "@codegouvfr/react-dsfr/MainNavigation"; + +const navigation: MainNavigationProps.Item[] = [ + { + menuLinks: [ + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Travail", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Solidarités", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Santé", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Tout voir", + }, + ], + text: "Nos startups", + }, + { + menuLinks: [ + { + linkProps: { + href: "#", + target: "_self", + }, + text: "À propos", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Notre offre", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "L'équipe", + }, + ], + text: "La Fabrique", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Proposez vos idées", + }, + { + linkProps: { + href: "#", + target: "_self", + }, + text: "Recrutement", + }, +]; + +const initLinks: FooterProps.LinkList.List = [{ categoryName: "Autres", links: [] }]; +const navigationToFooterLinkList: FooterProps.LinkList.List = navigation.reduce( + (linkList, item) => { + const otherLinks = linkList[linkList.length - 1]; + const previousLinks = linkList.slice(0, linkList.length - 1); + if (item.menuLinks) { + const listColumn: FooterProps.LinkList.Column = { + categoryName: item.text as string, + links: item.menuLinks.map((menuLink) => { + const link = menuLink as FooterProps.LinkList.Link; + return link; + }), + }; + return [...previousLinks, listColumn, otherLinks]; + } + otherLinks.links.push(item as FooterProps.LinkList.Link); + return [...previousLinks, otherLinks]; + }, + initLinks +); + +export function Header() { + return ( + + LA FABRIQUE +
+ DES MINISTÈRES SOCIAUX + + } + homeLinkProps={{ + href: "/", + title: "Accueil - Nom de l'entité (ministère, secrétariat d'état, gouvernement)", + }} + id="fr-header-header-with-quick-access-items-nav-items-and-search-engine" + navigation={} + // onSearchButtonClick={function noRefCheck(event) { + // console.log("onSearchButtonClick", event); + // }} + quickAccessItems={[ + { + iconId: "fr-icon-file-text-line", + linkProps: { + href: "/documentation", + }, + text: "Documentation", + }, + ]} + serviceTagline="Un incubateur betagouv 🥸" + serviceTitle="La Fabrique des Ministères Sociaux" + // operatorLogo={{ + // alt: "[À MODIFIER - texte alternatif de l’image]", + // imgUrl: "static/media/placeholder.9x16.bb7c62f0.png", + // orientation: "horizontal", + // }} + /> + ); +} + +export function Footer() { + return ( + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f20e61f92..771221604 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,7 +6,7 @@ import "./globals.css"; import { defaultColorScheme } from "./defaultColorScheme"; import Link from "next/link"; import type { Metadata } from "next"; -import CustomHeader from "./components/CustomHeader"; +import { Header, Footer } from "./components/HeaderAndFooter"; export const metadata: Metadata = { title: "Create Next App", @@ -38,8 +38,9 @@ export default function RootLayout({ children }: { children: JSX.Element }) { - +
{children} +