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

BIN
attached_assets/image_1762646832779.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

28
static/css/styles.css
View File

@@ -65,29 +65,26 @@ body::after {
.navbar-inner { .navbar-inner {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 24px; padding: 16px 32px;
background: rgba(0, 0, 0, 0.5); background: transparent;
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
} }
.navbar-logo { .navbar-logo {
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 20px; padding-right: 24px;
border-right: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.15);
margin-right: auto; margin-right: auto;
} }
.navbar-logo img { .navbar-logo img {
height: 36px; height: 40px;
display: block; display: block;
} }
.navbar-links { .navbar-links {
display: flex; display: flex;
gap: 8px; gap: 32px;
align-items: center; align-items: center;
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -95,19 +92,20 @@ body::after {
} }
.navbar-links a { .navbar-links a {
color: #d1d5db; color: #9ca3af;
text-decoration: none; text-decoration: none;
font-family: var(--font-body); font-family: var(--font-body);
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 15px;
padding: 8px 16px; transition: color 0.2s ease;
border-radius: 8px;
transition: all 0.2s ease;
} }
.navbar-links a:hover { .navbar-links a:hover {
color: #ffffff; color: #ffffff;
background: rgba(255, 255, 255, 0.1); }
.navbar-links a.active {
color: #3b82f6;
} }
.menu-button { .menu-button {

18
templates/base.html
View File

@@ -44,22 +44,30 @@
<script> <script>
const menuButton = document.querySelector('.menu-button'); const menuButton = document.querySelector('.menu-button');
const navSide = document.querySelector('.nav-side'); 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', () => { menuButton.addEventListener('click', () => {
if (navSide.style.display === 'none' || navSide.style.display === '') { if (navSide.style.display === 'none' || navSide.style.display === '') {
navSide.style.display = 'flex'; // Show the nav-side with flex navSide.style.display = 'flex';
} else { } else {
navSide.style.display = 'none'; // Hide the nav-side navSide.style.display = 'none';
} }
}); });
// Add event listeners to each link
navLinks.forEach(link => { navLinks.forEach(link => {
link.addEventListener('click', () => { 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> </script>
<!-- This is where child templates will insert their content --> <!-- This is where child templates will insert their content -->
{% block content %} {% block content %}