feat: merge Activity into single "/" dropdown menu

- All slash pages now under one "/" dropdown
- Dynamic pages (from Indiekit) appear first
- Activity feeds (github, listening, funkwhale, youtube, news) below divider
- Remove standalone Activity dropdown and /news link
- Add divider styles for desktop and mobile nav

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-01 14:50:44 +01:00
parent 54ddaaa5d4
commit ba94a6e5c8
2 changed files with 23 additions and 35 deletions
+15 -35
View File
@@ -112,7 +112,7 @@
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about/">About</a> <a href="/about/">About</a>
<a href="/now/">Now</a> <a href="/now/">Now</a>
{# Slash pages dropdown - dynamically populated from collections.pages #} {# Slash pages dropdown - all root pages in one menu #}
<div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false"> <div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
<a href="/slashes/" class="nav-dropdown-trigger"> <a href="/slashes/" class="nav-dropdown-trigger">
/ /
@@ -125,6 +125,12 @@
{% for item in collections.pages %} {% for item in collections.pages %}
<a href="{{ item.url }}">/{{ item.fileSlug }}</a> <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
{% endfor %} {% endfor %}
<div class="nav-dropdown-divider"></div>
<a href="/github/">/github</a>
<a href="/listening/">/listening</a>
<a href="/funkwhale/">/funkwhale</a>
<a href="/youtube/">/youtube</a>
<a href="/news/">/news</a>
</div> </div>
</div> </div>
{# Blog dropdown #} {# Blog dropdown #}
@@ -147,22 +153,6 @@
</div> </div>
</div> </div>
<a href="/interactions/">Interactions</a> <a href="/interactions/">Interactions</a>
<a href="/news/">News</a>
{# Activity dropdown #}
<div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
<button type="button" class="nav-dropdown-trigger">
Activity
<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>
</button>
<div class="nav-dropdown-menu" x-show="open" x-transition x-cloak>
<a href="/github/">GitHub</a>
<a href="/listening/">Listening</a>
<a href="/funkwhale/">Funkwhale</a>
<a href="/youtube/">YouTube</a>
</div>
</div>
</nav> </nav>
<button id="theme-toggle" type="button" class="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode"> <button id="theme-toggle" type="button" class="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -177,11 +167,11 @@
</div> </div>
{# Mobile nav dropdown #} {# Mobile nav dropdown #}
<nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, activityOpen: false, slashOpen: false }"> <nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, slashOpen: false }">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about/">About</a> <a href="/about/">About</a>
<a href="/now/">Now</a> <a href="/now/">Now</a>
{# Slash pages section - dynamically populated #} {# Slash pages section - all root pages in one menu #}
<div class="mobile-nav-section"> <div class="mobile-nav-section">
<button type="button" class="mobile-nav-toggle" @click="slashOpen = !slashOpen"> <button type="button" class="mobile-nav-toggle" @click="slashOpen = !slashOpen">
/ /
@@ -194,6 +184,12 @@
{% for item in collections.pages %} {% for item in collections.pages %}
<a href="{{ item.url }}">/{{ item.fileSlug }}</a> <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
{% endfor %} {% endfor %}
<div class="mobile-nav-divider"></div>
<a href="/github/">/github</a>
<a href="/listening/">/listening</a>
<a href="/funkwhale/">/funkwhale</a>
<a href="/youtube/">/youtube</a>
<a href="/news/">/news</a>
</div> </div>
</div> </div>
{# Blog section #} {# Blog section #}
@@ -216,22 +212,6 @@
</div> </div>
</div> </div>
<a href="/interactions/">Interactions</a> <a href="/interactions/">Interactions</a>
<a href="/news/">News</a>
{# Activity section #}
<div class="mobile-nav-section">
<button type="button" class="mobile-nav-toggle" @click="activityOpen = !activityOpen">
Activity
<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': activityOpen }" 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="activityOpen" x-collapse>
<a href="/github/">GitHub</a>
<a href="/listening/">Listening</a>
<a href="/funkwhale/">Funkwhale</a>
<a href="/youtube/">YouTube</a>
</div>
</div>
</nav> </nav>
</header> </header>
+8
View File
@@ -90,6 +90,10 @@
@apply block px-4 py-2 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-primary-600 dark:hover:text-primary-400 no-underline; @apply block px-4 py-2 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-primary-600 dark:hover:text-primary-400 no-underline;
} }
.nav-dropdown-divider {
@apply my-2 border-t border-surface-200 dark:border-surface-700;
}
/* Mobile menu toggle button */ /* Mobile menu toggle button */
.menu-toggle { .menu-toggle {
@apply md:hidden p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors; @apply md:hidden p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
@@ -121,6 +125,10 @@
@apply pl-8 py-2 text-sm border-b-0; @apply pl-8 py-2 text-sm border-b-0;
} }
.mobile-nav-divider {
@apply my-2 mx-4 border-t border-surface-200 dark:border-surface-700;
}
/* Theme toggle button */ /* Theme toggle button */
.theme-toggle { .theme-toggle {
@apply p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors; @apply p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;