Fix navigation links on mobile (#2548)

* An attempt to fixissue with navigation links on mobile * Fix lint * Fix incorrect css
TypeStrong · Apr 27, 2024 · eb363a2 · eb363a2
1 parent d4b9c74
commit eb363a2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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 */