Skip to content

Fix navigation bar responsiveness and active tab highlighting #8

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

Merged
merged 2 commits into from
Jul 5, 2025
Merged

Fix navigation bar responsiveness and active tab highlighting #8

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84d042b
Initial plan
Copilot Jul 5, 2025
5514347
Fix navigation bar responsiveness and active tab highlighting
Copilot Jul 5, 2025
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
43 changes: 39 additions & 4 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const paddingModifiers = [

<nav class="sm-nav py-4 relative z-10">
<div class="container mx-auto px-4">
<ul class="flex flex-wrap justify-center space-x-8 md:space-x-12">
<ul class="flex flex-wrap justify-center gap-2 sm:gap-4 md:gap-8">
<li><a href="/" class="sm-nav-link">Home</a></li>
<li><a href="/mods" class="sm-nav-link">Our Mods</a></li>
<li><a href="/docs" class="sm-nav-link">Documentation</a></li>
Expand Down Expand Up @@ -174,6 +174,24 @@ const paddingModifiers = [
modal!.style.display = 'none';
}
});

// Navigation active state highlighting
document.addEventListener('DOMContentLoaded', () => {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.sm-nav-link');

navLinks.forEach(link => {
const href = link.getAttribute('href');

// Check if current path matches the link href
// Handle exact matches and parent path matches
if (href === currentPath ||
(currentPath.startsWith(href + '/') && href !== '/') ||
(href === '/' && currentPath === '/')) {
link.classList.add('active');
}
});
});
</script>

<!-- SVG Definition for Nav Tab Shape -->
Expand Down Expand Up @@ -580,8 +598,8 @@ const paddingModifiers = [
.sm-nav-link {
color: var(--sm-text-white);
position: relative;
/* Adjust padding for symmetrical trapezium shape */
padding: 0.75rem 2rem;
/* Responsive padding - smaller on mobile */
padding: 0.5rem 1rem;
transition: all 0.2s;
/* Set background to the lighter color */
background-color: #3a4145; /* #2e3539 */
Expand All @@ -592,10 +610,27 @@ const paddingModifiers = [
/* border-top-right-radius: 8px; */
text-transform: uppercase;
font-weight: bold;
font-size: 0.9rem;
font-size: 0.8rem;
margin: 0;
border-top: 2px solid #555e63; /* Subtle top border */
text-decoration: none; /* Remove default underline */
display: inline-block;
white-space: nowrap;
}

/* Larger screens get more padding */
@media (min-width: 640px) {
.sm-nav-link {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
}
}

@media (min-width: 768px) {
.sm-nav-link {
padding: 0.75rem 2rem;
font-size: 0.9rem;
}
}

.sm-nav-link:hover {
Expand Down