svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dropdown navigation menus

Browse Source 
- Add Blog dropdown with all post types (articles, notes, photos, bookmarks, likes, replies, reposts)
- Add Activity dropdown with GitHub, Listening, Funkwhale, YouTube
- Add /news and /interactions links to main nav
- Add mobile-responsive collapsible sections with Alpine.js
- Add CSS for dropdown menus and mobile nav sections

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-01-26 19:17:34 +01:00
parent 8da928a91c
commit 80ced7b148
2 changed files with 107 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
_includes/layouts/base.njk
View File

@@ -93,14 +93,42 @@
<nav class="site-nav" id="site-nav">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/articles/">Articles</a>
<a href="/notes/">Notes</a>
{# Blog dropdown #}
<div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
<a href="/blog/" class="nav-dropdown-trigger">
Blog
<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="/blog/">All Posts</a>
<a href="/articles/">Articles</a>
<a href="/notes/">Notes</a>
<a href="/photos/">Photos</a>
<a href="/bookmarks/">Bookmarks</a>
<a href="/likes/">Likes</a>
<a href="/replies/">Replies</a>
<a href="/reposts/">Reposts</a>
</div>
</div>
<a href="/interactions/">Interactions</a>
<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>
{# 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>
<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">
@@ -115,17 +143,45 @@
</div>
{# Mobile nav dropdown #}
<nav class="mobile-nav hidden" id="mobile-nav">
<nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, activityOpen: false }">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/articles/">Articles</a>
<a href="/notes/">Notes</a>
{# Blog section #}
<div class="mobile-nav-section">
<button type="button" class="mobile-nav-toggle" @click="blogOpen = !blogOpen">
Blog
<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': blogOpen }" 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="blogOpen" x-collapse>
<a href="/blog/">All Posts</a>
<a href="/articles/">Articles</a>
<a href="/notes/">Notes</a>
<a href="/photos/">Photos</a>
<a href="/bookmarks/">Bookmarks</a>
<a href="/likes/">Likes</a>
<a href="/replies/">Replies</a>
<a href="/reposts/">Reposts</a>
</div>
</div>
<a href="/interactions/">Interactions</a>
<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>
{# 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>
</header>