From b6d97b1594c389bb827ca95cf9311e33a388623c Mon Sep 17 00:00:00 2001
From: Moanes Ben Amor <m.benamor@dkfz-heidelberg.de>
Date: Fri, 27 Sep 2024 10:30:59 +0200
Subject: [PATCH] add: api documentation to menu

---
 src/components/Header/index.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index c1af1a4..dc03127 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -31,12 +31,14 @@ const Header = () => {
   let $home: HTMLElement;
   let $features: HTMLElement;
   let $contact: HTMLElement;
+  let $apiDoc: HTMLElement;
 
   if (typeof document !== 'undefined') {
     sections = document.querySelectorAll("section[id]");
     $home = document.getElementById('home_');
     $features = document.getElementById('features_');
     $contact = document.getElementById('contact_');
+    $apiDoc = document.getElementById('apiDoc_');
     window.addEventListener("scroll", navHighlighter);
   }
 
@@ -67,18 +69,28 @@ const Header = () => {
         $home.className = "text-primary dark:text-white"
         $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $apiDoc.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       case "features": {
         $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $features.className = "text-primary dark:text-white"
         $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $apiDoc.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       case "contact": {
         $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $contact.className = "text-primary dark:text-white"
+        $apiDoc.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        break;
+      }
+      case "apiDoc": {
+        $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $apiDoc.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       default: {
@@ -168,6 +180,13 @@ const Header = () => {
                           </ScrollLink>
                       </li>
                     ))}
+                    <li key={menuData.length} className="group relative">
+                      <Link
+                          id={"apiDoc_"}
+                          href="/api-doc"
+                          className="flex py-2 text-lg lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 transition-transform cursor-pointer"
+                      >API Doc</Link>
+                    </li>
                   </ul>
                 </nav>
               </div>