111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
/**
|
|
* Initializes the burger menu navigation
|
|
* @param {Object} options - Configuration options
|
|
* @param {boolean} options.includeHome - Whether to include Home menu item
|
|
* @param {boolean} options.includeFeedings - Whether to include Feedings menu item
|
|
* @param {boolean} options.includeDiapers - Whether to include Diapers menu item
|
|
* @param {boolean} options.includeSleep - Whether to include Sleep menu item
|
|
* @param {boolean} options.includeSettings - Whether to include Settings menu item
|
|
*/
|
|
function initBurgerMenu(options = {}) {
|
|
const {
|
|
includeHome = true,
|
|
includeFeedings = true,
|
|
includeDiapers = true,
|
|
includeSleep = true,
|
|
includeSettings = true,
|
|
} = options;
|
|
|
|
// Create burger menu HTML
|
|
const burgerMenuHTML = `
|
|
<div class="burger-menu" id="burgerMenu">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="menu-backdrop" id="menuBackdrop"></div>
|
|
|
|
<div class="menu-overlay" id="menuOverlay">
|
|
${includeHome ? '<div class="menu-item" id="menuHome">🏠 Home</div>' : ""}
|
|
${includeDiapers ? '<div class="menu-item" id="menuDiapers">🧷 Diapers</div>' : ""}
|
|
${includeFeedings ? '<div class="menu-item" id="menuFeedings">🍼 Feedings</div>' : ""}
|
|
${includeSleep ? '<div class="menu-item" id="menuSleep">😴 Sleep</div>' : ""}
|
|
${includeSettings ? '<div class="menu-item" id="menuSettings">⚙️ Settings</div>' : ""}
|
|
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
|
</div>
|
|
`;
|
|
|
|
// Insert menu at the beginning of body
|
|
document.body.insertAdjacentHTML("afterbegin", burgerMenuHTML);
|
|
|
|
// Get elements
|
|
const burgerMenu = document.getElementById("burgerMenu");
|
|
const menuOverlay = document.getElementById("menuOverlay");
|
|
const menuBackdrop = document.getElementById("menuBackdrop");
|
|
|
|
// Toggle menu function
|
|
function toggleMenu() {
|
|
menuOverlay.classList.toggle("open");
|
|
menuBackdrop.classList.toggle("open");
|
|
}
|
|
|
|
// Close menu function
|
|
function closeMenu() {
|
|
menuOverlay.classList.remove("open");
|
|
menuBackdrop.classList.remove("open");
|
|
}
|
|
|
|
// Event listeners for menu toggle
|
|
burgerMenu.addEventListener("click", toggleMenu);
|
|
menuBackdrop.addEventListener("click", closeMenu);
|
|
|
|
// Navigation event listeners
|
|
if (includeHome) {
|
|
document.getElementById("menuHome")?.addEventListener("click", () => {
|
|
window.location.href = "/";
|
|
});
|
|
}
|
|
|
|
if (includeFeedings) {
|
|
document.getElementById("menuFeedings")?.addEventListener("click", () => {
|
|
window.location.href = "/feedings.html";
|
|
});
|
|
}
|
|
|
|
if (includeDiapers) {
|
|
document.getElementById("menuDiapers")?.addEventListener("click", () => {
|
|
window.location.href = "/diapers.html";
|
|
});
|
|
}
|
|
|
|
if (includeSleep) {
|
|
document.getElementById("menuSleep")?.addEventListener("click", () => {
|
|
window.location.href = "/sleep.html";
|
|
});
|
|
}
|
|
|
|
if (includeSettings) {
|
|
document.getElementById("menuSettings")?.addEventListener("click", () => {
|
|
window.location.href = "/settings.html";
|
|
});
|
|
}
|
|
|
|
document.getElementById("menuLogout").addEventListener("click", () => {
|
|
closeMenu();
|
|
// Call the page's logout function if it exists, otherwise use default
|
|
if (typeof logout === "function") {
|
|
logout();
|
|
} else {
|
|
defaultLogout();
|
|
}
|
|
});
|
|
|
|
// Default logout function
|
|
function defaultLogout() {
|
|
localStorage.removeItem("access_token");
|
|
localStorage.removeItem("username");
|
|
window.location.href = "/login.html";
|
|
}
|
|
}
|