feat: blank pages, folder structure and active links

SocialGouv · Aug 4, 2023 · a09b2ee · a09b2ee
1 parent e4db769
commit a09b2ee
Show file tree

Hide file tree

Showing 17 changed files with 150 additions and 40 deletions.
diff --git a/src/app/(la-fabrique)/about/page.tsx b/src/app/(la-fabrique)/about/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function About() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>À propos de la Fabrique</h1>
+    </section>
+  );
+}
diff --git a/src/app/(la-fabrique)/equipe/page.tsx b/src/app/(la-fabrique)/equipe/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function Team() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>L'équipe</h1>
+    </section>
+  );
+}
diff --git a/src/app/(la-fabrique)/notre-offre/page.tsx b/src/app/(la-fabrique)/notre-offre/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function NotreOffre() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Ce que vous offre de la Fabrique</h1>
+    </section>
+  );
+}
diff --git a/src/app/documentation/page.tsx b/src/app/documentation/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function Documentation() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Documentation</h1>
+    </section>
+  );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,23 +1,25 @@
-import "./globals.css";
+import "../styles/globals.css";
 import type { Metadata } from "next";
 
-import { defaultColorScheme } from "./defaultColorScheme";
+import { defaultColorScheme } from "../styles/defaultColorScheme";
 import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
 import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
 import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
-import { StartDsfr } from "./StartDsfr";
+import { StartDsfr } from "../components/StartDsfr";
 
 import Link from "next/link";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "La Fabrique des Ministères Sociaux",
+  description:
+    "La fabrique numérique des ministères sociaux reprend la démarche et les grands principes de beta.gouv, à savoir : Un leitmotiv : la résolution d'irritants...",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const lang = "fr";
+
   return (
     <html {...getHtmlAttributes({ defaultColorScheme, lang })}>
       <head>
@@ -41,7 +43,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <DsfrProvider lang={lang}>
           <Header />
-          {children}
+          <main
+            id="contenu"
+            className="flex min-h-screen flex-col items-center justify-between p-24">
+            {children}
+          </main>
           <Footer />
         </DsfrProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,10 +2,10 @@ import { fr } from "@codegouvfr/react-dsfr";
 
 export default function Home() {
   return (
-    <main id="contenu" className="flex min-h-screen flex-col items-center justify-between p-24">
-      <section className={fr.cx("fr-h1")}>
-        <h1>Santé, Solidarité, Travail: nos startups à votre service</h1>
+    <>
+      <section>
+        <h1 className={fr.cx("fr-h1")}>Santé, Solidarité, Travail: nos startups à votre service</h1>
       </section>
-    </main>
+    </>
   );
 }
diff --git a/src/app/proposez-vous-idees/page.tsx b/src/app/proposez-vous-idees/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function ProposezVosIdees() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Proposez vos idées</h1>
+    </section>
+  );
+}
diff --git a/src/app/recrutement/page.tsx b/src/app/recrutement/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function Recrutement() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Recrutement</h1>
+    </section>
+  );
+}
diff --git a/src/app/startups/page.tsx b/src/app/startups/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function Startups() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Nos startups</h1>
+    </section>
+  );
+}
diff --git a/src/app/components/Footer.tsx → src/components/Footer.tsx b/src/app/components/Footer.tsx → src/components/Footer.tsx
@@ -1,10 +1,13 @@
 import { Footer as DSFRFooter, type FooterProps } from "@codegouvfr/react-dsfr/Footer";
 
-import { items as navigationItems } from "./Navigation";
+import { navigationItems, quickAccessItems } from "../utils/navigationItems";
 
 const otherLinks: FooterProps.LinkList.Column = {
   categoryName: "Autres",
-  links: navigationItems.filter((item) => !item.menuLinks) as FooterProps.LinkList.Links,
+  links: [
+    ...(navigationItems.filter((item) => !item.menuLinks) as FooterProps.LinkList.Links),
+    ...(quickAccessItems as unknown as FooterProps.LinkList.Link[]),
+  ].slice(0, 8) as FooterProps.LinkList.Links,
 };
 
 const navigationToFooterLinkList: FooterProps.LinkList.List = [

diff --git a/src/app/components/Header.tsx → src/components/Header.tsx b/src/app/components/Header.tsx → src/components/Header.tsx
@@ -1,3 +1,4 @@
+import { quickAccessItems } from "@/utils/navigationItems";
 import Navigation from "./Navigation";
 import { Header as DSFRHeader } from "@codegouvfr/react-dsfr/Header";
 
@@ -17,15 +18,7 @@ export default function Header() {
       }}
       id="fr-header-header-with-quick-access-items-nav-items-and-search-engine"
       navigation={<Navigation />}
-      quickAccessItems={[
-        {
-          iconId: "fr-icon-file-text-line",
-          linkProps: {
-            href: "/documentation",
-          },
-          text: "Documentation",
-        },
-      ]}
+      quickAccessItems={quickAccessItems}
       serviceTagline="Un incubateur betagouv 🥸"
       serviceTitle="La Fabrique des Ministères Sociaux"
     />

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { useMemo } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { MainNavigation, type MainNavigationProps } from "@codegouvfr/react-dsfr/MainNavigation";
+import { navigationItems } from "../utils/navigationItems";
+
+export default function Navigation() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams().toString();
+
+  const activeNavigationItems = useMemo(() => {
+    const currentUrl = `${pathname}${window.location.hash}${
+      searchParams ? `?${searchParams}` : ""
+    }`;
+    const activeNavigationItems = navigationItems.map((item: MainNavigationProps.Item) => {
+      if (item.menuLinks?.length) {
+        let isActive = false;
+        const activeMenuLinks = item.menuLinks.map((menuLink) => {
+          const menuLinkIsActive = currentUrl === (menuLink.linkProps.href as string);
+          if (menuLinkIsActive) isActive = true;
+          return { ...menuLink, isActive: menuLinkIsActive };
+        });
+
+        return { ...item, isActive, menuLinks: activeMenuLinks };
+      }
+      if (!item.linkProps) return item;
+      return { ...item, isActive: pathname.startsWith(item.linkProps.href as string) };
+    });
+    return activeNavigationItems;
+  }, [pathname, searchParams]);
+
+  // Warning: Prop `id` did not match. Server: "main-navigation-:Rt6cq:-button-0" Client: "main-navigation-:R3kpj9:-button-0"
+  // https://github.com/vercel/next.js/issues/53110
+
+  return <MainNavigation items={activeNavigationItems} />;
+}
diff --git a/src/app/StartDsfr.tsx → src/components/StartDsfr.tsx b/src/app/StartDsfr.tsx → src/components/StartDsfr.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
-import { defaultColorScheme } from "./defaultColorScheme";
+import { defaultColorScheme } from "../styles/defaultColorScheme";
 import Link from "next/link";
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {
-  interface RegisterLink { 
+  interface RegisterLink {
     Link: typeof Link;
   }
 }
 
 startReactDsfr({ defaultColorScheme, Link });
 
-export function StartDsfr(){
+export function StartDsfr() {
   //Yes, leave null here.
   return null;
 }
diff --git a/src/app/defaultColorScheme.ts → src/styles/defaultColorScheme.ts b/src/app/defaultColorScheme.ts → src/styles/defaultColorScheme.ts
diff --git a/src/app/globals.css → src/styles/globals.css b/src/app/globals.css → src/styles/globals.css
diff --git a/src/app/components/Navigation.tsx → src/utils/navigationItems.ts b/src/app/components/Navigation.tsx → src/utils/navigationItems.ts
@@ -1,32 +1,33 @@
-import { MainNavigation, type MainNavigationProps } from "@codegouvfr/react-dsfr/MainNavigation";
+import { type MainNavigationProps } from "@codegouvfr/react-dsfr/MainNavigation";
+import { type HeaderProps } from "@codegouvfr/react-dsfr/Header";
 
-export const items: MainNavigationProps.Item[] = [
+const navigationItems: MainNavigationProps.Item[] = [
   {
     menuLinks: [
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=travail",
           target: "_self",
         },
         text: "Travail",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=solidarites",
           target: "_self",
         },
         text: "Solidarités",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=sante",
           target: "_self",
         },
         text: "Santé",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups",
           target: "_self",
         },
         text: "Tout voir",
@@ -38,21 +39,21 @@ export const items: MainNavigationProps.Item[] = [
     menuLinks: [
       {
         linkProps: {
-          href: "#",
+          href: "/about",
           target: "_self",
         },
         text: "À propos",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/notre-offre",
           target: "_self",
         },
         text: "Notre offre",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/equipe",
           target: "_self",
         },
         text: "L'équipe",
@@ -62,20 +63,28 @@ export const items: MainNavigationProps.Item[] = [
   },
   {
     linkProps: {
-      href: "#",
+      href: "/proposez-vous-idees",
       target: "_self",
     },
     text: "Proposez vos idées",
   },
   {
     linkProps: {
-      href: "#",
+      href: "/recrutement",
       target: "_self",
     },
     text: "Recrutement",
   },
 ];
 
-export default function Navigation() {
-  return <MainNavigation items={items} />
-}
+const quickAccessItems: HeaderProps.QuickAccessItem[] = [
+  {
+    iconId: "fr-icon-file-text-line",
+    linkProps: {
+      href: "/documentation",
+    },
+    text: "Documentation",
+  },
+];
+
+export { navigationItems, quickAccessItems };