diff --git a/.changeset/mighty-items-wish.md b/.changeset/mighty-items-wish.md
new file mode 100644
index 00000000..346355bd
--- /dev/null
+++ b/.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
diff --git a/packages/starlight-utils/components/NavLinks.astro b/packages/starlight-utils/components/NavLinks.astro
index 75186ac0..83baf10b 100644
--- a/packages/starlight-utils/components/NavLinks.astro
+++ b/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 && (
-
+
{Astro.locals.starlightUtils.navLinks.map((entry) => (
-
- 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);
}
}
diff --git a/packages/starlight-utils/config.ts b/packages/starlight-utils/config.ts
index 7e56365d..46f3577a 100644
--- a/packages/starlight-utils/config.ts
+++ b/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();
diff --git a/packages/starlight-utils/middleware.ts b/packages/starlight-utils/middleware.ts
index a09571dd..d9f65fb0 100644
--- a/packages/starlight-utils/middleware.ts
+++ b/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
diff --git a/packages/starlight-utils/virtual.d.ts b/packages/starlight-utils/virtual.d.ts
index f17c9265..62cf278b 100644
--- a/packages/starlight-utils/virtual.d.ts
+++ b/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.