ptarrant/Code_of_Conquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add navigation menu bar for logged-in users

Browse Source 
- Add horizontal nav menu with 7 items: Profile, Characters, Sessions,
  Mechanics, Leaderboard, Settings, Help
- Implement responsive hamburger menu for mobile (≤768px)
- Create pages blueprint with stub routes for new pages
- Add "Coming Soon" styled stub templates with icons
- Include active state highlighting for current page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Phillip Tarrant
2025-11-26 10:21:46 -06:00
parent 4d26c43d1d
commit 77d913fe50
10 changed files with 573 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
public_web/templates/base.html
View File

@@ -28,14 +28,49 @@
<a href="/" class="logo">⚔️ Code of Conquest</a>
{% if current_user %}
<nav class="header-nav">
<span class="user-greeting">Welcome, {{ current_user.name or current_user.email }}!</span>
<!-- Desktop Navigation Menu -->
<nav class="nav-menu">
<a href="{{ url_for('pages.profile') }}" class="nav-item {% if request.path == '/profile' %}active{% endif %}">Profile</a>
<a href="{{ url_for('character_views.list_characters') }}" class="nav-item {% if request.path.startswith('/characters') %}active{% endif %}">Characters</a>
<a href="{{ url_for('pages.sessions') }}" class="nav-item {% if request.path == '/sessions' %}active{% endif %}">Sessions</a>
<a href="{{ url_for('pages.mechanics') }}" class="nav-item {% if request.path == '/mechanics' %}active{% endif %}">Mechanics</a>
<a href="{{ url_for('pages.leaderboard') }}" class="nav-item {% if request.path == '/leaderboard' %}active{% endif %}">Leaderboard</a>
<a href="{{ url_for('pages.settings') }}" class="nav-item {% if request.path == '/settings' %}active{% endif %}">Settings</a>
<a href="{{ url_for('pages.help_page') }}" class="nav-item {% if request.path == '/help' %}active{% endif %}">Help</a>
</nav>
<!-- User Info & Logout -->
<div class="header-user">
<span class="user-greeting">{{ current_user.name or current_user.email }}</span>
<form method="POST" action="{{ url_for('auth_views.logout') }}" class="logout-form">
<button type="submit" class="btn-link">Logout</button>
</form>
</nav>
</div>
<!-- Mobile Hamburger Button -->
<button class="hamburger-btn" onclick="toggleMobileMenu()" aria-label="Toggle menu">
<span class="hamburger-icon"></span>
</button>
{% endif %}
</div>
{% if current_user %}
<!-- Mobile Navigation Menu -->
<nav class="mobile-menu" id="mobileMenu">
<a href="{{ url_for('pages.profile') }}" class="mobile-nav-item {% if request.path == '/profile' %}active{% endif %}">Profile</a>
<a href="{{ url_for('character_views.list_characters') }}" class="mobile-nav-item {% if request.path.startswith('/characters') %}active{% endif %}">Characters</a>
<a href="{{ url_for('pages.sessions') }}" class="mobile-nav-item {% if request.path == '/sessions' %}active{% endif %}">Sessions</a>
<a href="{{ url_for('pages.mechanics') }}" class="mobile-nav-item {% if request.path == '/mechanics' %}active{% endif %}">Mechanics</a>
<a href="{{ url_for('pages.leaderboard') }}" class="mobile-nav-item {% if request.path == '/leaderboard' %}active{% endif %}">Leaderboard</a>
<a href="{{ url_for('pages.settings') }}" class="mobile-nav-item {% if request.path == '/settings' %}active{% endif %}">Settings</a>
<a href="{{ url_for('pages.help_page') }}" class="mobile-nav-item {% if request.path == '/help' %}active{% endif %}">Help</a>
<div class="mobile-menu-divider"></div>
<span class="mobile-user-greeting">{{ current_user.name or current_user.email }}</span>
<form method="POST" action="{{ url_for('auth_views.logout') }}" class="logout-form">
<button type="submit" class="mobile-nav-item mobile-logout">Logout</button>
</form>
</nav>
{% endif %}
</header>
<!-- Main Content -->
@@ -65,6 +100,36 @@
</p>
</footer>
<!-- Mobile Menu JavaScript -->
<script>
function toggleMobileMenu() {
const menu = document.getElementById('mobileMenu');
const btn = document.querySelector('.hamburger-btn');
menu.classList.toggle('open');
btn.classList.toggle('open');
}
// Close menu when clicking outside
document.addEventListener('click', function(event) {
const menu = document.getElementById('mobileMenu');
const btn = document.querySelector('.hamburger-btn');
if (menu && !menu.contains(event.target) && !btn.contains(event.target)) {
menu.classList.remove('open');
btn.classList.remove('open');
}
});
// Close menu on HTMX navigation
document.body.addEventListener('htmx:afterRequest', function() {
const menu = document.getElementById('mobileMenu');
const btn = document.querySelector('.hamburger-btn');
if (menu) {
menu.classList.remove('open');
btn.classList.remove('open');
}
});
</script>
<!-- JavaScript -->
{% block scripts %}{% endblock %}
</body>