69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Set initial page based on URL hash or default to 'home'
|
|
const initialPage = window.location.hash.substring(1) || 'home';
|
|
openPage(initialPage, true);
|
|
|
|
// Handle back/forward navigation
|
|
window.addEventListener('popstate', (event) => {
|
|
const pageId = event.state ? event.state.page : 'home';
|
|
openPage(pageId, true);
|
|
});
|
|
|
|
// Check for query params like ?status=applied and switch to the right page
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('status') || urlParams.has('error')) {
|
|
openPage('apply', true);
|
|
}
|
|
});
|
|
|
|
function openPage(pageId, isHistoryNavigation = false) {
|
|
if (!pageId) pageId = 'home';
|
|
|
|
// Hide all pages
|
|
document.querySelectorAll('.page').forEach(page => {
|
|
page.classList.add('hidden');
|
|
});
|
|
|
|
// Show the target page
|
|
const targetPage = document.getElementById(`page-${pageId}`);
|
|
if (targetPage) {
|
|
targetPage.classList.remove('hidden');
|
|
} else {
|
|
// Fallback to home if page not found
|
|
document.getElementById('page-home').classList.remove('hidden');
|
|
pageId = 'home';
|
|
}
|
|
|
|
// Update nav links
|
|
document.querySelectorAll('.navlink').forEach(link => {
|
|
// Use endsWith to correctly match hrefs like '/#home' and '#home'
|
|
if (link.getAttribute('href').endsWith(`#${pageId}`)) {
|
|
link.classList.add('active');
|
|
} else {
|
|
link.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Construct the new URL, preserving the base path
|
|
const newUrl = window.location.pathname + `#${pageId}`;
|
|
|
|
if (!isHistoryNavigation) {
|
|
// Create a new history state
|
|
history.pushState({ page: pageId }, null, newUrl);
|
|
} else {
|
|
// If it IS history navigation, we might need to clean up query params from the URL
|
|
if (window.location.search) {
|
|
history.replaceState({ page: pageId }, null, newUrl);
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleMenu(forceClose = false) {
|
|
const drawer = document.getElementById('drawer');
|
|
if (forceClose || !drawer.classList.contains('hidden')) {
|
|
drawer.classList.add('hidden');
|
|
} else {
|
|
drawer.classList.remove('hidden');
|
|
}
|
|
}
|