Add option to hide navlinks on mobile

.changeset/mighty-items-wish.md

@@ -0,0 +1,5 @@
+---
+"@lorenzo_lewis/starlight-utils": minor
+---
+
+Adds navLinksMobileDisplay config option, allowing for user to optionally hide navlinks on mobile

packages/starlight-utils/components/NavLinks.astro

@@ -1,11 +1,12 @@
 ---
 // Styles adapted from https://github.com/withastro/starlight/blob/main/packages/starlight/components/SidebarSublist.astro
 // and https://www.figma.com/design/GrDkcguAR7tSWPFuLVDixq/Theme---Starlight-Docs?node-id=454-34753&t=fgVYGvAg6ftBSpJY-0
+const navLinksMobileDisplay = Astro.locals.starlightUtils.navLinksMobileDisplay || "flex";
 ---
 
 {
   Astro.locals.starlightUtils.navLinks && (
-    <ul>
+    <ul class="nav-links" style={`--nav-links-mobile-display: ${navLinksMobileDisplay};`}>
       {Astro.locals.starlightUtils.navLinks.map((entry) => (
         <li>
           <a
@@ -22,12 +23,13 @@
 }
 
 <style>
-  ul {
+  .nav-links {
     display: flex;
     list-style: none;
     padding: 0;
     gap: var(--sl-nav-gap);
   }
+
   a {
     text-decoration: none;
     color: var(--sl-color-gray-1);
@@ -44,9 +46,9 @@
     font-weight: 600;
   }
 
-  @media (min-width: 50rem) {
-    a {
-      font-size: var(--sl-text-sm);
+  @media (max-width: 50rem) {
+    .nav-links {
+      display: var(--nav-links-mobile-display, none);
     }
   }
 </style>

packages/starlight-utils/config.ts

@@ -29,6 +29,7 @@ export const configSchema = z
   .object({
     multiSidebar: multiSidebarConfig,
     navLinks: navLinksConfig,
+    navLinksMobileDisplay: z.enum(["none", "flex"]).optional(),
   })
   .optional();
 

packages/starlight-utils/middleware.ts

@@ -57,6 +57,11 @@ export const onRequest = defineRouteMiddleware((context) => {
     context.locals.starlightRoute.sidebar = filteredSidebar;
   }
 
+  // Logic for navLinksMobileDisplay
+  if (config?.navLinksMobileDisplay) {
+    context.locals.starlightUtils.navLinksMobileDisplay = config.navLinksMobileDisplay;
+  }
+
   // Logic for multi-sidebar
   if (config?.multiSidebar) {
     // All entries must be group types

packages/starlight-utils/virtual.d.ts

@@ -3,6 +3,10 @@ declare module "virtual:starlight-utils/config" {
   export default Config;
 }
 
+export interface StarlightUtilsConfig {
+  navLinksMobileDisplay?: "none" | "flex";
+}
+
 declare namespace App {
   type StarlightLocals = import("@astrojs/starlight").StarlightLocals;
   // Define the `locals.t` object in the context of a plugin.