Skip to content

UI/UX: Implement responsive mobile navigation menu #492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prince-shakyaa wants to merge 5 commits into
base: main
Choose a base branch
from
Open

UI/UX: Implement responsive mobile navigation menu #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a163b6
UI/UX: Add mobile navigation menu structure
May 7, 2026
4f1c2ae
UI/UX: Implement mobile menu toggle logic
May 7, 2026
a8425d9
UI/UX: Adjust mobile menu font sizes and styles
May 7, 2026
fab04d4
UI/UX: Refine mobile navigation and hide redundant links
May 7, 2026
73ae754
UI/UX: Restore GitHub link visibility on mobile nav bar
May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions finbot/apps/finbot/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,36 @@
<span class="hidden sm:inline">GitHub</span>
</a>
{% endblock %}
<button id="mobile-menu-button" class="sm:hidden ml-2 p-2 text-text-3 hover:text-cyan transition-colors" aria-label="Toggle Menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
</button>
</nav>
</div>
</header>

<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="fixed inset-0 z-[60] bg-bg-primary/95 backdrop-blur-2xl transition-all duration-300 transform translate-x-full sm:hidden">
<div class="flex flex-col h-full p-8">
<div class="flex justify-between items-center mb-12">
<span class="text-text-1 font-bold text-xl tracking-tight">MENU</span>
<button id="mobile-menu-close" class="p-2 text-text-3 hover:text-danger transition-colors">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<nav class="flex flex-col space-y-6">
{% block mobile_nav %}
<a href="/" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">Home</a>
<a href="/how-it-works" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">How It Works</a>
<a href="/portals" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">Portals</a>
<a href="/about" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">About</a>
{% endblock %}
</nav>
<div class="mt-auto pt-8 border-t border-border-dim">
<p class="text-text-3 text-xs">Part of the <a href="https://genai.owasp.org/" class="text-cyan">OWASP GenAI Security Project</a></p>
</div>
</div>
</div>

<main class="relative z-10">
{% block content %}{% endblock %}
</main>
Expand All @@ -122,5 +148,36 @@
</footer>

{% block scripts %}{% endblock %}
<script>
// Mobile Menu Toggle
const menuBtn = document.getElementById('mobile-menu-button');
const closeBtn = document.getElementById('mobile-menu-close');
const mobileMenu = document.getElementById('mobile-menu');
const body = document.body;

function toggleMenu(show) {
if (show) {
mobileMenu.classList.remove('translate-x-full');
body.style.overflow = 'hidden';
} else {
mobileMenu.classList.add('translate-x-full');
body.style.overflow = '';
}
}

if (menuBtn) menuBtn.addEventListener('click', () => toggleMenu(true));
if (closeBtn) closeBtn.addEventListener('click', () => toggleMenu(false));

// Close menu on link click (especially for anchor links)
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => toggleMenu(false));
});

// Close on ESC
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') toggleMenu(false);
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion finbot/apps/finbot/templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
{% endblock %}

{% block nav %}
<a href="#challenges" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Challenges</a>
<a href="#challenges" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Challenges</a>
<a href="/how-it-works" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">How It Works</a>
<a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
<a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
Expand Down