Merge pull request #72 from SjnExe/fix-header-pathing-logic

fix(js): Correct header loading and nav highlighting logic

Author: SjnExe

js/main.js

@@ -19,10 +19,27 @@ document.addEventListener('DOMContentLoaded', function() {
             // Individual error catching is removed here to be handled by Promise.all
     };
 
-    // Determine path prefix based on nesting level
-    const path = window.location.pathname;
-    const depth = path.split('/').length - (path.endsWith('/') ? 2 : 1);
-    const prefix = '../'.repeat(depth - 1);
+    // Determine path prefix based on the current page's location relative to the project root.
+    function getPathPrefix() {
+        const path = window.location.pathname;
+        const directoryPath = path.substring(0, path.lastIndexOf('/') + 1);
+        const projectRoot = '/SiteExe/';
+        const rootIndex = directoryPath.indexOf(projectRoot);
+
+        // Fallback for local dev or unexpected structure
+        if (rootIndex === -1) {
+            // Remove leading slash to correctly count directories for local file server
+            const localPath = path.startsWith('/') ? path.substring(1) : path;
+            const depth = localPath.split('/').length - 1;
+            return '../'.repeat(depth);
+        }
+
+        const relativePath = directoryPath.substring(rootIndex + projectRoot.length);
+        const depth = (relativePath.match(/\//g) || []).length;
+        return '../'.repeat(depth);
+    }
+
+    const prefix = getPathPrefix();
 
     // Load header and footer in parallel, then perform actions.
     Promise.all([
@@ -36,36 +53,33 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Highlight active navigation link
         const navLinks = document.querySelectorAll('#main-header nav a');
-        const currentPath = window.location.pathname;
-        // Get the base href from the <base> tag to correctly resolve paths
-        const baseHref = (document.querySelector('base[href]')?.getAttribute('href') || '/').replace(/\/$/, '');
+        const currentPathname = window.location.pathname;
 
-        navLinks.forEach(link => {
-            const linkUrl = new URL(link.href);
-            let linkPath = linkUrl.pathname;
+        let bestMatchLink = null;
+        let longestMatchLength = 0;
 
-            // If the link path starts with the base path, remove it for accurate comparison
-            if (linkPath.startsWith(baseHref)) {
-                linkPath = linkPath.substring(baseHref.length);
-            }
+        for (const link of navLinks) {
+            const linkPathname = new URL(link.href).pathname;
 
-            // Normalize current path to match the link's structure (e.g. ensure leading slash)
-            let normalizedCurrentPath = currentPath.substring(baseHref.length);
-            if (!normalizedCurrentPath.startsWith('/')) {
-                normalizedCurrentPath = '/' + normalizedCurrentPath;
-            }
+            // Normalize both paths to treat `page` and `page/` the same for `startsWith` comparison.
+            const normalizedCurrent = currentPathname.endsWith('/') ? currentPathname : `${currentPathname}/`;
+            const normalizedLink = linkPathname.endsWith('/') ? linkPathname : `${linkPathname}/`;
 
-            // Handle the root path case
-            if (linkPath === '/' && (normalizedCurrentPath === '/index.html' || normalizedCurrentPath === '/')) {
-                 link.classList.add('active');
-                 return; // Stop further processing for the root link
+            // Check if the current page is a sub-path of the link's path.
+            if (normalizedCurrent.startsWith(normalizedLink)) {
+                // If this link is a more specific match than the previous best, update it.
+                if (normalizedLink.length > longestMatchLength) {
+                    bestMatchLink = link;
+                    longestMatchLength = normalizedLink.length;
+                }
             }
+        }
 
-            // Check for other pages, ensuring it doesn't mistakenly match the root
-            if (linkPath !== '/' && normalizedCurrentPath.startsWith(linkPath)) {
-                link.classList.add('active');
-            }
-        });
+        // If a matching link was found, add the 'active' class.
+        if (bestMatchLink) {
+            bestMatchLink.classList.add('active');
+        }
+    });
     }).catch(error => {
         // Single catch block for any error during component loading
         console.error(`Error loading components:`, error);

jules-scratch/verification/verify_header.py

@@ -0,0 +1,29 @@
+from playwright.sync_api import sync_playwright
+import sys
+
+def run():
+    with sync_playwright() as p:
+        browser = p.chromium.launch()
+        page = browser.new_page()
+
+        # Listen for console errors
+        page.on("console", lambda msg: print(f"Browser console error: {msg.text}", file=sys.stderr))
+
+        # Navigate to the local server URL
+        page.goto('http://localhost:8000/projects/minecraft-nbt-editor/')
+
+        # Wait for the header to be loaded
+        try:
+            page.wait_for_selector('#main-header nav', timeout=10000) # Reduced timeout
+            # Take a screenshot of the header area
+            header_element = page.query_selector('#main-header')
+            header_element.screenshot(path='jules-scratch/verification/header-verification.png')
+            print("Verification successful, screenshot taken.")
+        except Exception as e:
+            print(f"Verification failed: {e}", file=sys.stderr)
+            sys.exit(1) # Exit with an error code
+
+        browser.close()
+
+if __name__ == '__main__':
+    run()