Skip to content

Commit 3d67bbe

Browse files
dubadubdubadub
committed
fix: mobile menu
1 parent 8271254 commit 3d67bbe

3 files changed

Lines changed: 77 additions & 3 deletions

File tree

‎docker-compose.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ version: '3.8'
22

33
services:
44
app:
5-
image: ghcr.io/cooklang/federation:0.1.4
5+
image: ghcr.io/cooklang/federation:0.1.5
66
build: .
77
ports:
88
- "${PORT:-3100}:${PORT:-3100}"

‎src/api/routes.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ pub fn create_router(state: AppState, settings: &Settings) -> Router {
142142
SetResponseHeaderLayer::if_not_present(
143143
header::CONTENT_SECURITY_POLICY,
144144
HeaderValue::from_static(
145-
"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'"
145+
"default-src 'self'; script-src 'self' 'unsafe-inline' https://plausible.io; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://plausible.io; object-src 'none'; base-uri 'self'"
146146
),
147147
),
148148
)

‎src/web/templates/base.html‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,36 @@
3939
</div>
4040
</div>
4141
<div class="flex items-center gap-4">
42-
<a href="/api/stats" class="text-sm text-gray-500 hover:text-gray-700">API</a>
42+
<a href="/api/stats" class="hidden sm:inline text-sm text-gray-500 hover:text-gray-700">API</a>
43+
<!-- Mobile menu button -->
44+
<button id="mobile-menu-button" class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500">
45+
<span class="sr-only">Open main menu</span>
46+
<!-- Hamburger icon -->
47+
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
48+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
49+
</svg>
50+
<!-- Close icon (hidden by default) -->
51+
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
52+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
53+
</svg>
54+
</button>
55+
</div>
56+
</div>
57+
<!-- Mobile menu -->
58+
<div id="mobile-menu" class="hidden sm:hidden">
59+
<div class="pt-2 pb-3 space-y-1">
60+
<a href="/" data-nav-mobile="search" class="nav-link-mobile border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
61+
Search
62+
</a>
63+
<a href="/feeds" data-nav-mobile="feeds" class="nav-link-mobile border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
64+
Feeds
65+
</a>
66+
<a href="/about" data-nav-mobile="about" class="nav-link-mobile border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
67+
About
68+
</a>
69+
<a href="/api/stats" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
70+
API
71+
</a>
4372
</div>
4473
</div>
4574
</nav>
@@ -66,12 +95,38 @@
6695
</div>
6796
</footer>
6897

98+
<!-- Mobile Menu Toggle Script -->
99+
<script>
100+
(function() {
101+
const menuButton = document.getElementById('mobile-menu-button');
102+
const mobileMenu = document.getElementById('mobile-menu');
103+
const hamburgerIcon = menuButton.querySelector('svg:first-of-type');
104+
const closeIcon = menuButton.querySelector('svg:last-of-type');
105+
106+
menuButton.addEventListener('click', function() {
107+
const isHidden = mobileMenu.classList.contains('hidden');
108+
109+
if (isHidden) {
110+
mobileMenu.classList.remove('hidden');
111+
hamburgerIcon.classList.add('hidden');
112+
closeIcon.classList.remove('hidden');
113+
} else {
114+
mobileMenu.classList.add('hidden');
115+
hamburgerIcon.classList.remove('hidden');
116+
closeIcon.classList.add('hidden');
117+
}
118+
});
119+
})();
120+
</script>
121+
69122
<!-- Active Navigation Script -->
70123
<script>
71124
(function() {
72125
const path = window.location.pathname;
73126
const navLinks = document.querySelectorAll('.nav-link');
127+
const navLinksMobile = document.querySelectorAll('.nav-link-mobile');
74128

129+
// Desktop navigation
75130
navLinks.forEach(link => {
76131
const navType = link.getAttribute('data-nav');
77132
let isActive = false;
@@ -89,6 +144,25 @@
89144
link.classList.add('border-orange-600', 'text-gray-900');
90145
}
91146
});
147+
148+
// Mobile navigation
149+
navLinksMobile.forEach(link => {
150+
const navType = link.getAttribute('data-nav-mobile');
151+
let isActive = false;
152+
153+
if (navType === 'search' && (path === '/' || path.startsWith('/?'))) {
154+
isActive = true;
155+
} else if (navType === 'feeds' && path.startsWith('/feeds')) {
156+
isActive = true;
157+
} else if (navType === 'about' && path.startsWith('/about')) {
158+
isActive = true;
159+
}
160+
161+
if (isActive) {
162+
link.classList.remove('border-transparent', 'text-gray-500');
163+
link.classList.add('border-orange-600', 'text-gray-900');
164+
}
165+
});
92166
})();
93167
</script>
94168
</body>

0 commit comments

Comments
 (0)