From 54ddaaa5d440b52cb2ba4e005d06139d8b86e268 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sun, 1 Feb 2026 14:29:49 +0100
Subject: [PATCH] feat: make slash pages a dynamic dropdown menu

- Desktop: "/" becomes dropdown showing all pages from collections.pages
- Mobile: "/" becomes collapsible section with all dynamic pages
- New pages created via Indiekit automatically appear in nav

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 _includes/layouts/base.njk | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index c158850..46a1c4c 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -112,7 +112,21 @@
           <a href="/">Home</a>
           <a href="/about/">About</a>
           <a href="/now/">Now</a>
-          <a href="/slashes/" title="All slash pages">/</a>
+          {# Slash pages dropdown - dynamically populated from collections.pages #}
+          <div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+            <a href="/slashes/" class="nav-dropdown-trigger">
+              /
+              <svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </a>
+            <div class="nav-dropdown-menu" x-show="open" x-transition x-cloak>
+              <a href="/slashes/">All Pages</a>
+              {% for item in collections.pages %}
+              <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
+              {% endfor %}
+            </div>
+          </div>
           {# Blog dropdown #}
           <div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
             <a href="/blog/" class="nav-dropdown-trigger">
@@ -163,11 +177,25 @@
     </div>
 
     {# Mobile nav dropdown #}
-    <nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, activityOpen: false }">
+    <nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, activityOpen: false, slashOpen: false }">
       <a href="/">Home</a>
       <a href="/about/">About</a>
       <a href="/now/">Now</a>
-      <a href="/slashes/" title="All slash pages">/</a>
+      {# Slash pages section - dynamically populated #}
+      <div class="mobile-nav-section">
+        <button type="button" class="mobile-nav-toggle" @click="slashOpen = !slashOpen">
+          /
+          <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': slashOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+        <div class="mobile-nav-submenu" x-show="slashOpen" x-collapse>
+          <a href="/slashes/">All Pages</a>
+          {% for item in collections.pages %}
+          <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
+          {% endfor %}
+        </div>
+      </div>
       {# Blog section #}
       <div class="mobile-nav-section">
         <button type="button" class="mobile-nav-toggle" @click="blogOpen = !blogOpen">