giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases 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

37
css/tailwind.css
View File

@@ -68,10 +68,28 @@
@apply flex items-center gap-4;
}
.site-nav a {
.site-nav > a,
.site-nav .nav-dropdown-trigger {
@apply text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 no-underline transition-colors py-2;
}
/* Navigation dropdown */
.nav-dropdown {
@apply relative;
}
.nav-dropdown-trigger {
@apply flex items-center gap-1 cursor-pointer bg-transparent border-none text-base;
}
.nav-dropdown-menu {
@apply absolute top-full left-0 mt-1 py-2 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg min-w-[160px] z-50;
}
.nav-dropdown-menu a {
@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;
}
/* Mobile menu toggle button */
.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;
@@ -86,6 +104,23 @@
@apply block px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-primary-600 dark:hover:text-primary-400 no-underline transition-colors border-b border-surface-100 dark:border-surface-800 last:border-b-0;
}
/* Mobile nav collapsible sections */
.mobile-nav-section {
@apply border-b border-surface-100 dark:border-surface-800;
}
.mobile-nav-toggle {
@apply flex items-center justify-between w-full px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-primary-600 dark:hover:text-primary-400 transition-colors bg-transparent border-none text-base text-left cursor-pointer;
}
.mobile-nav-submenu {
@apply bg-surface-50 dark:bg-surface-800;
}
.mobile-nav-submenu a {
@apply pl-8 py-2 text-sm border-b-0;
}
/* Theme toggle button */
.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;