feat: Improve navigation with subitems and getNeighboringLinks function

app/components/syntax/Logo.tsx

@@ -33,7 +33,7 @@ function LogomarkPaths() {
   );
 }
 
-export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
+export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 231 38" {...props}>
       <LogomarkPaths />
@@ -51,3 +51,11 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
     </svg>
   );
 }
+
+export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg viewBox="0 0 58 38" {...props}>
+      <LogomarkPaths />
+    </svg>
+  );
+}

app/components/syntax/MobileNavigation.tsx

@@ -55,9 +55,11 @@ export function MobileNavigation() {
       >
         <MenuIcon className="h-6 w-6 stroke-slate-500" />
       </button>
+
       <Suspense fallback={null}>
         <CloseOnNavigation close={close} />
       </Suspense>
+
       <Dialog
         open={isOpen}
         onClose={() => close()}
@@ -71,7 +73,7 @@ export function MobileNavigation() {
             </button>
 
             <Link href="/" className="ml-6" aria-label="Page d'accueil">
-              <Logo className="h-9 w-9" />
+              <Logo className="h-6 w-auto shrink-0" />
             </Link>
           </div>
           <Navigation className="mt-5 px-1" onLinkClick={onLinkClick} />

app/components/syntax/PrevNextLinks.tsx

@@ -52,49 +52,26 @@ function PageLink({
 }
 
 export function PrevNextLinks() {
-  const allLinks = navigation.flatMap((section) => section.links);
+  const allLinks = navigation
+    .flatMap((section) => section.links)
+    .flatMap((link) => {
+      return link.subitems ? [link, ...link.subitems] : link;
+    });
   const { urlPathname } = usePageContext();
 
-  let subItemElement: undefined | NavigationSubItem;
+  const getNeighboringLinks = () => {
+    const linkIndex = allLinks.findIndex((link) => link.href === urlPathname);
+    if (linkIndex === -1) return [null, null];
 
-  const findLinkIndex = (pathname = urlPathname) => {
+    const previousPage = allLinks[linkIndex - 1] || null;
-    for (let i = 0; i < allLinks.length; i++) {
+    const nextPage = allLinks[linkIndex + 1] || null;
-      const link = allLinks[i];
 
-      if (link.href === urlPathname) {
+    return [previousPage, nextPage];
-        return i;
-      }
-
-      if (link.subitems) {
-        const subitemIndex = link.subitems.findIndex((subitem) => subitem.href === urlPathname);
-
-        if (subitemIndex !== -1) {
-          subItemElement = link.subitems[subitemIndex];
-          return i;
-        }
-      }
-    }
   };
 
-  const linkIndex = findLinkIndex();
+  const [previousPage, nextPage] = getNeighboringLinks();
-  if (linkIndex === undefined) return null;
 
-  let previousPage: NavigationSubItem | NavigationLink | null = linkIndex > -1 ? allLinks[linkIndex - 1] : null;
+  if (!nextPage && !previousPage) return null;
-  let nextPage: NavigationSubItem | NavigationLink | null = linkIndex > -1 ? allLinks[linkIndex + 1] : null;
-
-  if (subItemElement !== undefined) {
-    const subItemIndex = findLinkIndex(subItemElement.href)!;
-    const currentPage = allLinks[subItemIndex];
-    const subItemIndexInLink = currentPage.subitems?.findIndex((subitem) => subitem.href === urlPathname);
-    if (subItemIndexInLink !== undefined && subItemIndexInLink > -1) {
-      previousPage = currentPage.subitems[subItemIndexInLink - 1];
-      nextPage = currentPage.subitems[subItemIndexInLink + 1];
-    }
-  }
-
-  if (!nextPage && !previousPage) {
-    return null;
-  }
 
   return (
     <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">

app/data/certifications/dwwm/at2/page.md

@@ -0,0 +1,23 @@
+---
+title: Activité Type 2 - Développer la partie back-end d'une application web ou web mobile sécurisée
+description: Synthèse et explications des attentes relatives à l'activité type 2 du titre professionnel DWWM (01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Cette activité type concerne tout ce qui est relatif à la conception _(maquettes, arborescence etc.)_ et à la création de l'interface.
+
+Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétences professionnelles ! 🚀
+
+Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
+
+- **CP 1** : Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+- **CP 2** : Maquetter des interfaces utilisateur web ou web mobile
+- **CP 3** : Réaliser des interfaces utilisateur statiques web ou web mobile
+- **CP 4** : Développer la partie dynamique des interfaces utilisateur web ou web mobile

app/layouts/LayoutDefault.tsx

@@ -7,7 +7,7 @@ import { Link } from "@/components/common/Link";
 import { useEffect, useState } from "react";
 import { Search } from "@syntax/Search";
 import { Hero } from "@syntax/Hero";
-import { Logo } from "@syntax/Logo";
+import { Logo, LogoWithText } from "@syntax/Logo";
 import clsx from "clsx";
 
 import "./style.css";
@@ -52,8 +52,9 @@ function Header() {
       </div>
 
       <div className="relative flex grow basis-0 items-center">
-        <Link href="/" aria-label="Home page">
+        <Link href="/" aria-label="Home page" className="flex items-center gap-2">
-          <Logo className="h-9 w-auto lg:block" />
+          <Logo className="h-9 w-auto" />
+          <span className="hidden lg:inline text-2xl font-bold -tracking-tight">Memento Dev</span>
         </Link>
       </div>