From eb363a2dbbb4c2250a0baffa40d4ebdf8079ae56 Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Sat, 27 Apr 2024 19:35:37 +0300
Subject: [PATCH] Fix navigation links on mobile (#2548)

* An attempt to fixissue with navigation links on mobile

* Fix lint

* Fix incorrect css
---
 src/lib/output/themes/default/partials/navigation.tsx | 9 ++++++++-
 static/style.css                                      | 9 +++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/output/themes/default/partials/navigation.tsx b/src/lib/output/themes/default/partials/navigation.tsx
index 6622fa70d..7ae6968ad 100644
--- a/src/lib/output/themes/default/partials/navigation.tsx
+++ b/src/lib/output/themes/default/partials/navigation.tsx
@@ -27,12 +27,19 @@ function buildFilterItem(context: DefaultThemeRenderContext, name: string, displ
 
 export function sidebarLinks(context: DefaultThemeRenderContext) {
     const links = Object.entries(context.options.getValue("sidebarLinks"));
-    if (!links.length) return null;
+    const navLinks = Object.entries(context.options.getValue("navigationLinks"));
+
+    if (!links.length && !navLinks.length) return null;
     return (
         <nav id="tsd-sidebar-links" class="tsd-navigation">
             {links.map(([label, url]) => (
                 <a href={url}>{label}</a>
             ))}
+            {navLinks.map(([label, url]) => (
+                <a href={url} class="tsd-nav-link">
+                    {label}
+                </a>
+            ))}
         </nav>
     );
 }
diff --git a/static/style.css b/static/style.css
index b1ef2fb7d..da5e73a66 100644
--- a/static/style.css
+++ b/static/style.css
@@ -762,6 +762,9 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
     padding: 0;
     max-width: 100%;
 }
+.tsd-navigation .tsd-nav-link {
+    display: none;
+}
 .tsd-nested-navigation {
     margin-left: 3rem;
 }
@@ -1340,6 +1343,12 @@ img {
     .has-menu .tsd-navigation {
         max-height: 100%;
     }
+    #tsd-toolbar-links {
+        display: none;
+    }
+    .tsd-navigation .tsd-nav-link {
+        display: flex;
+    }
 }
 
 /* one sidebar */