Close table of content when clicking on a link (#109)

* Close table of content when clicking on a link

* Lint

src/components/Header/HeaderMobileMenu.tsx

@@ -1,21 +1,29 @@
 'use client';
 
+import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { IconMenu } from '@/components/icons/IconMenu';
 import { useLanguage, tString } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
 
+const globalClassName = 'navigation-open';
+
+/**
+ * Button to show/hide the table of content on mobile.
+ */
 export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLButtonElement>>) {
     const language = useLanguage();
     const scrollDistance = 320;
+
+    const pathname = usePathname();
     const [hasScrolled, setHasScrolled] = useState(false);
 
     const toggleNavigation = () => {
-        if (!hasScrolled && document.body.classList.contains('navigation-open')) {
-            document.body.classList.remove('navigation-open');
+        if (!hasScrolled && document.body.classList.contains(globalClassName)) {
+            document.body.classList.remove(globalClassName);
         } else {
-            document.body.classList.add('navigation-open');
+            document.body.classList.add(globalClassName);
             window.scrollTo(0, 0);
         }
     };
@@ -28,6 +36,11 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
         }
     };
 
+    // Close the navigation when navigating to a page
+    useEffect(() => {
+        document.body.classList.remove(globalClassName);
+    }, [pathname]);
+
     useEffect(() => {
         window.addEventListener('scroll', handleScroll);
         return () => {