KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve website navigation appearance and highlight the current page

Browse Source 
Update CSS for navbar and add JavaScript to apply an 'active' class to the current page's link in the navbar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 75bceff7-98f2-4f6e-ae8e-e735399a1fe8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 804f4791-b980-4106-94d1-355e504e838b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/75bceff7-98f2-4f6e-ae8e-e735399a1fe8/OT40Fqx
This commit is contained in:
abhiramtx
2025-11-09 00:08:16 +00:00
parent 84a3dfb856
commit 01289d6157
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/base.html
View File

@@ -44,22 +44,30 @@
<script>
const menuButton = document.querySelector('.menu-button');
const navSide = document.querySelector('.nav-side');
const navLinks = document.querySelectorAll('.nav-side a'); // Select all links inside nav-side
const navLinks = document.querySelectorAll('.nav-side a');
menuButton.addEventListener('click', () => {
if (navSide.style.display === 'none' || navSide.style.display === '') {
navSide.style.display = 'flex'; // Show the nav-side with flex
navSide.style.display = 'flex';
} else {
navSide.style.display = 'none'; // Hide the nav-side
navSide.style.display = 'none';
}
});
// Add event listeners to each link
navLinks.forEach(link => {
link.addEventListener('click', () => {
navSide.style.display = 'none'; // Hide the nav-side
navSide.style.display = 'none';
});
});
// Highlight active page
const currentPath = window.location.pathname;
const navbarLinks = document.querySelectorAll('.navbar-links a');
navbarLinks.forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active');
}
});
</script>
<!-- This is where child templates will insert their content -->
{% block content %}