Update index.html

Author: Yeetov

index.html

@@ -545,8 +545,8 @@
 
     <!-- Navigation -->
     <nav class="navbar">
-        <a class="nav-link active" onclick="router('home')">Home</a>
-        <a class="nav-link" onclick="router('staff')">Staff</a>
+        <a class="nav-link active" href="#home">Home</a>
+        <a class="nav-link" href="#staff">Staff</a>
         <a class="nav-link" href="https://discord.com/invite/userpfp-1129784704267210844" target="_blank">Discord</a>
     </nav>
 
@@ -596,31 +596,48 @@ <h3 id="modalTitle" style="margin-top:0; font-size: 1.5rem; margin-bottom: 0.5re
     </div>
 
     <script>
-        // --- Router Logic ---
-        function router(viewName) {
+        // --- Redirection Logic ---
+        // Instantly redirect if user is on /website/ path (legacy support)
+        if (window.location.pathname.includes('/website')) {
+            const newPath = window.location.pathname.replace('/website', '');
+            window.location.replace(newPath + window.location.hash);
+        }
+
+        // --- Routing Logic ---
+        function handleRoute() {
+            // Get hash or default to 'home'
+            let viewName = window.location.hash.replace('#', '') || 'home';
+
+            // Valid routes check (optional, but good for safety)
+            if (!['home', 'staff'].includes(viewName)) {
+                viewName = 'home';
+            }
+
             // Update Nav
             document.querySelectorAll('.nav-link').forEach(link => {
                 link.classList.remove('active');
-                if(link.innerText.toLowerCase() === viewName) link.classList.add('active');
+                if (link.getAttribute('href') === `#${viewName}`) link.classList.add('active');
             });
 
-            // Update View
+            // Update View visibility
             document.querySelectorAll('.view-container').forEach(view => {
                 view.classList.remove('active');
             });
-            document.getElementById(`${viewName}-view`).classList.add('active');
+            const activeView = document.getElementById(`${viewName}-view`);
+            if (activeView) activeView.classList.add('active');
 
-            // Handle background visibility
+            // Handle background & Lazy Loading
             const bgContainer = document.getElementById('pfp-bg-container');
             if (viewName === 'home') {
-                bgContainer.style.display = 'block';
-                // Lazy load PFPs if not loaded yet
+                if (bgContainer) bgContainer.style.display = 'block';
                 if (!window.pfpsLoaded) loadPfps();
             } else {
-                bgContainer.style.display = 'none';
-                // Lazy load Staff if not loaded yet
+                if (bgContainer) bgContainer.style.display = 'none';
                 if (!window.staffLoaded && viewName === 'staff') loadStaff();
             }
+            
+            // Scroll to top
+            window.scrollTo(0, 0);
         }
 
         // --- Home Logic (PFP Columns & Mods) ---
@@ -900,12 +917,17 @@ <h3 id="modalTitle" style="margin-top:0; font-size: 1.5rem; margin-bottom: 0.5re
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             initMods();
-            router('home');
+            
+            // Initial routing
+            handleRoute();
 
             // Close modal when clicking outside
             document.getElementById('infoModal').addEventListener('click', (e) => {
                 if(e.target === document.getElementById('infoModal')) closeModal();
             });
+
+            // Listen for hash changes
+            window.addEventListener('hashchange', handleRoute);
         });
 
     </script>