Skip to content
This repository was archived by the owner on Apr 4, 2026. It is now read-only.

Commit 1f9ee3d

Browse files
DevBot667DevBot667
committed
feat: add mobile hamburger nav menu on all pages
1 parent 4f04b26 commit 1f9ee3d

4 files changed

Lines changed: 104 additions & 1 deletion

File tree

‎src/pages/changelog.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,24 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
2525
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
2626
GitHub
2727
</a>
28+
<button id="mobile-menu-btn" class="md:hidden flex flex-col gap-1.5 p-2 cursor-pointer" aria-label="Menu">
29+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar1"></span>
30+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar2"></span>
31+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar3"></span>
32+
</button>
33+
</div>
34+
</div>
35+
36+
<!-- Mobile menu -->
37+
<div id="mobile-menu" class="md:hidden hidden glass-strong border-t border-white/5">
38+
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-3 text-sm">
39+
<a href={base} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">Home</a>
40+
<a href={`${base}how-it-works`} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">How it Works</a>
41+
<a href={`${base}changelog`} class="py-2 text-phantom-light font-semibold">Changelog</a>
42+
<a href="https://github.com/DevBot667/SecureChat" target="_blank" rel="noopener noreferrer" class="py-2 text-phantom-light hover:text-phantom transition-colors flex items-center gap-2">
43+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
44+
GitHub
45+
</a>
2846
</div>
2947
</div>
3048
</nav>
@@ -110,6 +128,15 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
110128
<script>
111129
import { marked } from 'marked';
112130

131+
// Mobile Menu Toggle
132+
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
133+
const mobileMenu = document.getElementById('mobile-menu');
134+
mobileMenuBtn?.addEventListener('click', () => {
135+
mobileMenuBtn.closest('nav')?.classList.toggle('menu-open');
136+
mobileMenu?.classList.toggle('hidden');
137+
mobileMenu?.classList.toggle('open');
138+
});
139+
113140
const BASE = 'https://raw.githubusercontent.com/DevBot667/SecureChat/main/docs';
114141
const elFr = document.getElementById('changelog-fr')!;
115142
const elEn = document.getElementById('changelog-en')!;

‎src/pages/how-it-works.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,24 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
2525
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
2626
GitHub
2727
</a>
28+
<button id="mobile-menu-btn" class="md:hidden flex flex-col gap-1.5 p-2 cursor-pointer" aria-label="Menu">
29+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar1"></span>
30+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar2"></span>
31+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar3"></span>
32+
</button>
33+
</div>
34+
</div>
35+
36+
<!-- Mobile menu -->
37+
<div id="mobile-menu" class="md:hidden hidden glass-strong border-t border-white/5">
38+
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-3 text-sm">
39+
<a href={base} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">Home</a>
40+
<a href={`${base}how-it-works`} class="py-2 text-phantom-light font-semibold">How it Works</a>
41+
<a href={`${base}changelog`} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">Changelog</a>
42+
<a href="https://github.com/DevBot667/SecureChat" target="_blank" rel="noopener noreferrer" class="py-2 text-phantom-light hover:text-phantom transition-colors flex items-center gap-2">
43+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
44+
GitHub
45+
</a>
2846
</div>
2947
</div>
3048
</nav>
@@ -308,6 +326,15 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
308326
</footer>
309327

310328
<script>
329+
// Mobile Menu Toggle
330+
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
331+
const mobileMenu = document.getElementById('mobile-menu');
332+
mobileMenuBtn?.addEventListener('click', () => {
333+
mobileMenuBtn.closest('nav')?.classList.toggle('menu-open');
334+
mobileMenu?.classList.toggle('hidden');
335+
mobileMenu?.classList.toggle('open');
336+
});
337+
311338
// Language
312339
const langToggle = document.getElementById('lang-toggle');
313340
let currentLang = 'fr';

‎src/pages/index.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,30 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
4444
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
4545
GitHub
4646
</a>
47+
<button id="mobile-menu-btn" class="md:hidden flex flex-col gap-1.5 p-2 cursor-pointer" aria-label="Menu">
48+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar1"></span>
49+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar2"></span>
50+
<span class="block w-6 h-0.5 bg-white transition-all duration-300" id="bar3"></span>
51+
</button>
52+
</div>
53+
</div>
54+
55+
<!-- Mobile menu -->
56+
<div id="mobile-menu" class="md:hidden hidden glass-strong border-t border-white/5">
57+
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-3 text-sm">
58+
<a href="#features" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="fr" data-mobile-link>Fonctionnalités</a>
59+
<a href="#features" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="en" data-mobile-link>Features</a>
60+
<a href="#security" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="fr" data-mobile-link>Sécurité</a>
61+
<a href="#security" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="en" data-mobile-link>Security</a>
62+
<a href="#crypto" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="fr" data-mobile-link>Cryptographie</a>
63+
<a href="#crypto" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-lang="en" data-mobile-link>Cryptography</a>
64+
<a href={`${base}how-it-works`} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">How it Works</a>
65+
<a href={`${base}changelog`} class="py-2 text-text-secondary hover:text-phantom-light transition-colors">Changelog</a>
66+
<a href="#faq" class="py-2 text-text-secondary hover:text-phantom-light transition-colors" data-mobile-link>FAQ</a>
67+
<a href="https://github.com/DevBot667/SecureChat" target="_blank" rel="noopener noreferrer" class="py-2 text-phantom-light hover:text-phantom transition-colors flex items-center gap-2">
68+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
69+
GitHub
70+
</a>
4771
</div>
4872
</div>
4973
</nav>
@@ -525,6 +549,24 @@ const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
525549

526550
<!-- ===== SCRIPTS ===== -->
527551
<script>
552+
// ---- Mobile Menu Toggle ----
553+
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
554+
const mobileMenu = document.getElementById('mobile-menu');
555+
mobileMenuBtn?.addEventListener('click', () => {
556+
const nav = mobileMenuBtn.closest('nav');
557+
nav?.classList.toggle('menu-open');
558+
mobileMenu?.classList.toggle('hidden');
559+
mobileMenu?.classList.toggle('open');
560+
});
561+
document.querySelectorAll('[data-mobile-link]').forEach(link => {
562+
link.addEventListener('click', () => {
563+
const nav = mobileMenuBtn?.closest('nav');
564+
nav?.classList.remove('menu-open');
565+
mobileMenu?.classList.add('hidden');
566+
mobileMenu?.classList.remove('open');
567+
});
568+
});
569+
528570
// ---- Language Switcher ----
529571
const langToggle = document.getElementById('lang-toggle');
530572
let currentLang = 'fr';

‎src/styles/global.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,4 +355,11 @@ body {
355355
/* Loading skeleton for changelog */
356356
.skeleton { position: relative; overflow: hidden; background: rgba(123, 45, 142, 0.08); border-radius: 8px; }
357357
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(156, 77, 204, 0.06), transparent); animation: shimmer 1.8s infinite; }
358-
@keyframes shimmer { 100% { transform: translateX(100%); } }
358+
@keyframes shimmer { 100% { transform: translateX(100%); } }
359+
360+
/* Mobile hamburger animation */
361+
.menu-open #bar1 { transform: translateY(4px) rotate(45deg); }
362+
.menu-open #bar2 { opacity: 0; }
363+
.menu-open #bar3 { transform: translateY(-4px) rotate(-45deg); }
364+
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
365+
#mobile-menu.open { max-height: 500px; }

0 commit comments

Comments
 (0)