Fix navigation bar responsiveness and active tab highlighting

[Copilot]

This PR fixes two critical issues with the navigation bar (Scrap Mechanic inventory styles):

Issues Fixed

1. Missing Active Tab Highlighting

The navigation tabs were not showing yellow highlighting for the current page. The CSS had the .active class styles defined, but no JavaScript was applying this class dynamically.

Before: No visual indication of current page
After: Current tab shows yellow background and border

2. Poor Mobile Responsiveness

On smaller screens, navigation tabs stacked awkwardly with inconsistent spacing, creating an unpleasant user experience.

Before: Tabs wrapped with poor spacing using space-x-8 md:space-x-12
After: Improved responsive design with consistent gaps and smaller padding on mobile

Changes Made

JavaScript Enhancement

• Added DOMContentLoaded event listener to detect current page path
• Implemented logic to apply .active class to matching navigation links
• Handles exact path matches and parent path matching (e.g., /docs for /docs/getting-started)

CSS Improvements

• Replaced space-x-* classes with responsive gap-2 sm:gap-4 md:gap-8 for better mobile layout
• Added responsive padding: smaller on mobile (0.5rem 1rem), larger on desktop (0.75rem 2rem)
• Added responsive font sizes: 0.8rem → 0.85rem → 0.9rem across breakpoints
• Added white-space: nowrap and display: inline-block to prevent text wrapping

Screenshots

Desktop - Active tab highlighting working:

Mobile - Improved responsive layout:

Home page - Active state works across all pages:

Testing

• ✅ Active tab highlighting works on all pages (/, /docs, /wiki, etc.)
• ✅ Mobile layout no longer has awkward stacking issues
• ✅ Responsive design works across all screen sizes
• ✅ Maintains existing Scrap Mechanic inventory tab styling

Fixes #7.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/ReDoIngMods.github.io/ReDoIngMods.github.io/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/ReDoIngMods.github.io/ReDoIngMods.github.io/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.