diff --git a/views/components/header/header.css b/views/components/header/header.css index 945f71f..7ecb8d4 100644 --- a/views/components/header/header.css +++ b/views/components/header/header.css @@ -144,7 +144,8 @@ margin: 0 15px; /* space around separator */ /* stacked dots */ - box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6), + box-shadow: + 0 6px 0 rgba(255, 255, 255, 0.6), 0 -6px 0 rgba(255, 255, 255, 0.6); } @@ -328,7 +329,7 @@ flex-grow: 1; } - .contact-section { + .header-contact-section { display: none; /* Hide contact info on mobile - it will be in sidebar */ } diff --git a/views/components/header/header.html b/views/components/header/header.html index ccb4e89..283ae4c 100644 --- a/views/components/header/header.html +++ b/views/components/header/header.html @@ -55,7 +55,7 @@ -
+
diff --git a/views/components/sidebar/sidebar.css b/views/components/sidebar/sidebar.css new file mode 100644 index 0000000..20146ce --- /dev/null +++ b/views/components/sidebar/sidebar.css @@ -0,0 +1,128 @@ +/* views/components/sidebar/sidebar.css */ +/* Floating Menu Button Styles */ +.floating-menu-btn { + display: none; + position: fixed; + bottom: 25px; + right: 25px; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #e84e0f; + color: white; + border: none; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + z-index: 1030; + cursor: pointer; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.floating-menu-btn:hover { + background-color: #c93d0a; + transform: scale(1.05); +} + +.floating-menu-btn i { + font-size: 1.8rem; +} + +/* Sidebar Overlay */ +.sidebar-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1040; +} + +.sidebar-overlay.show { + display: block; +} + +/* Sidebar Styles */ +.sidebar { + position: fixed; + top: 0; + left: -300px; + width: 300px; + height: 100%; + background-color: #30875f; + z-index: 1050; + overflow-y: auto; + transition: left 0.3s ease; + padding: 20px; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); +} + +.sidebar.open { + left: 0; +} + +.sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.sidebar-logo { + width: 60px; + height: auto; +} + +.close-sidebar { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; +} + +.sidebar-nav { + display: flex; + flex-direction: column; +} + +.sidebar-nav .nav-link { + padding: 15px 10px !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + color: white !important; + text-decoration: none; +} + +.sidebar-contact { + margin-top: 20px; + color: white; + font-size: 0.9rem; +} + +.sidebar-contact div { + margin-bottom: 10px; +} + +/* Media Queries for Sidebar */ +@media (max-width: 768px) { + .floating-menu-btn { + display: flex; + } +} + +@media (max-width: 576px) { + .sidebar { + width: 250px; + } + + .floating-menu-btn { + width: 50px; + height: 50px; + bottom: 20px; + right: 20px; + } +} diff --git a/views/components/sidebar/sidebar.html b/views/components/sidebar/sidebar.html new file mode 100644 index 0000000..925ebc9 --- /dev/null +++ b/views/components/sidebar/sidebar.html @@ -0,0 +1,56 @@ + + + + + + + + diff --git a/views/components/sidebar/sidebar.js b/views/components/sidebar/sidebar.js new file mode 100644 index 0000000..159e12f --- /dev/null +++ b/views/components/sidebar/sidebar.js @@ -0,0 +1,69 @@ +// views/components/sidebar/sidebar.js +document.addEventListener("DOMContentLoaded", () => { + initSidebar(); +}); + +function initSidebar() { + const floatingMenuBtn = document.getElementById("floatingMenuBtn"); + const sidebarOverlay = document.getElementById("sidebarOverlay"); + const sidebar = document.getElementById("sidebar"); + const closeSidebarBtn = document.querySelector(".close-sidebar"); + + function openSidebar() { + if (sidebar && sidebarOverlay) { + sidebar.classList.add("open"); + sidebarOverlay.style.display = "block"; + } + } + + function closeSidebar() { + if (sidebar && sidebarOverlay) { + sidebar.classList.remove("open"); + sidebarOverlay.style.display = "none"; + } + } + + if (floatingMenuBtn) { + floatingMenuBtn.addEventListener("click", openSidebar); + } + + if (closeSidebarBtn) { + closeSidebarBtn.addEventListener("click", closeSidebar); + } + + if (sidebarOverlay) { + sidebarOverlay.addEventListener("click", closeSidebar); + } + + // Close sidebar when clicking outside or on a link + document.addEventListener("click", (e) => { + if (sidebar && sidebar.classList.contains("open")) { + // Click outside sidebar and not on floating menu button + if ( + !sidebar.contains(e.target) && + !e.target.closest("#floatingMenuBtn") + ) { + closeSidebar(); + } + // Click on a nav link + if (e.target.closest(".sidebar-nav .nav-link")) { + closeSidebar(); + } + } + }); + + // Handle scroll behavior to hide/show floating menu button smoothly + let lastScrollY = window.scrollY; + window.addEventListener("scroll", () => { + if (window.innerWidth <= 768 && floatingMenuBtn) { + if (window.scrollY > lastScrollY && window.scrollY > 100) { + // Scrolling down + floatingMenuBtn.style.display = "none"; + } else { + // Scrolling up + floatingMenuBtn.style.display = "flex"; + } + } + lastScrollY = window.scrollY; + }); +} diff --git a/views/components/sidebar/sidebarLoader.js b/views/components/sidebar/sidebarLoader.js new file mode 100644 index 0000000..b0e5d87 --- /dev/null +++ b/views/components/sidebar/sidebarLoader.js @@ -0,0 +1,24 @@ +// views/components/sidebar/sidebarLoader.js +document.addEventListener("DOMContentLoaded", function () { + const sidebarContainer = document.getElementById("sidebar-container"); + if (!sidebarContainer) return; + + // Load HTML + fetch("/components/sidebar/sidebar.html") + .then((response) => response.text()) + .then((data) => { + sidebarContainer.innerHTML = data; + + // Load CSS + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = "/components/sidebar/sidebar.css"; + document.head.appendChild(link); + + // Load JS + const script = document.createElement("script"); + script.src = "/components/sidebar/sidebar.js"; + document.body.appendChild(script); + }) + .catch((error) => console.error("Error loading sidebar:", error)); +}); diff --git a/views/homePages/homeMain.html b/views/homePages/homeMain.html index 7b478e0..2214dca 100644 --- a/views/homePages/homeMain.html +++ b/views/homePages/homeMain.html @@ -25,62 +25,8 @@ - - - - - - - - + +