From d61c23d6a9e0622b898723e0034a35c85caf3074 Mon Sep 17 00:00:00 2001 From: DylanBarnes Date: Sun, 10 May 2026 12:21:43 +0000 Subject: [PATCH] Refactor navbar into separate component, fix dropdown menu and dark mode --- components/navbar.html | 30 ++++++++ css/style.css | 54 ++++++++++++++ eis_projekt.html | 32 +-------- impressum.html | 32 +-------- index.html | 32 +-------- js/navbar.js | 156 +++++++++++++++++++++++++++++++++++++++++ js/script.js | 60 +--------------- kontakt.html | 31 +------- notenrechner-dom.html | 23 +----- notenrechner.html | 23 +----- team.html | 32 +-------- textanalyse.html | 23 +----- ueber_uns.html | 32 +-------- 13 files changed, 250 insertions(+), 310 deletions(-) create mode 100644 components/navbar.html create mode 100644 js/navbar.js diff --git a/components/navbar.html b/components/navbar.html new file mode 100644 index 0000000..b1dcf5d --- /dev/null +++ b/components/navbar.html @@ -0,0 +1,30 @@ +
+ +
diff --git a/css/style.css b/css/style.css index 6234c27..28a1a80 100644 --- a/css/style.css +++ b/css/style.css @@ -83,6 +83,48 @@ header { display: block; } +/* New dropdown submenu styles for component */ +.dropdown-submenu { + position: absolute; + top: 100%; + left: 0; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; + min-width: 220px; + list-style: none; + padding: 0.5rem 0; + margin: 0.5rem 0 0 0; + display: none; + flex-direction: column; + z-index: 1001; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); +} + +.dropdown-submenu.show { + display: flex; +} + +.dropdown-submenu li { + list-style: none; + padding: 0; +} + +.dropdown-submenu li a { + display: block; + padding: 0.7rem 1.25rem; + white-space: nowrap; + color: rgba(255, 255, 255, 0.95); + transition: all 0.2s ease; + text-decoration: none; +} + +.dropdown-submenu li a:hover { + background: rgba(255, 255, 255, 0.15); + padding-left: 1.5rem; + color: white; +} + .nav-menu a { text-decoration: none; color: rgba(255, 255, 255, 0.9); @@ -1162,6 +1204,18 @@ body.dark .exercise-card td { color: #a0aec0; } +body.dark .dropdown-submenu { + background: rgba(0, 0, 0, 0.4); +} + +body.dark .dropdown-submenu li a { + color: rgba(226, 232, 240, 0.95); +} + +body.dark .dropdown-submenu li a:hover { + background: rgba(226, 232, 240, 0.15); +} + body.dark .exercise-card th { background-color: #2d3e5f; color: #e2e8f0; diff --git a/eis_projekt.html b/eis_projekt.html index 1b29ca0..98b54a7 100644 --- a/eis_projekt.html +++ b/eis_projekt.html @@ -11,37 +11,6 @@ -
- -
-
@@ -128,6 +97,7 @@ + diff --git a/impressum.html b/impressum.html index a12f061..08cefcd 100644 --- a/impressum.html +++ b/impressum.html @@ -11,37 +11,6 @@ -
- -
-
@@ -191,6 +160,7 @@ + diff --git a/index.html b/index.html index ff1627e..11ed820 100644 --- a/index.html +++ b/index.html @@ -11,37 +11,6 @@ -
- -
-
@@ -99,6 +68,7 @@ + diff --git a/js/navbar.js b/js/navbar.js new file mode 100644 index 0000000..a121ced --- /dev/null +++ b/js/navbar.js @@ -0,0 +1,156 @@ +// ====================== NAVBAR COMPONENT LOADER ====================== + +/** + * Determine the correct path to the navbar component based on current page + */ +function getNavbarPath() { + const path = window.location.pathname; + // Check if we're in a subdirectory + if (path.includes('/notenrechner') || path.includes('/textanalyse')) { + return '../components/navbar.html'; + } + return 'components/navbar.html'; +} + +/** + * Load the navbar component into the page + */ +async function loadNavbar() { + try { + const navbarPath = getNavbarPath(); + const response = await fetch(navbarPath); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const html = await response.text(); + + // Insert navbar at the beginning of body + document.body.insertAdjacentHTML('afterbegin', html); + + // Set the active nav link based on current page + setActiveNavLink(); + + // Initialize navbar functionality + initializeNavbar(); + + // Initialize dark mode + initializeDarkMode(); + + } catch (error) { + console.error('Error loading navbar:', error); + // Fallback: Create a basic navbar if loading fails + createFallbackNavbar(); + } +} + +/** + * Set the active class on the current page's nav link + */ +function setActiveNavLink() { + const currentPage = window.location.pathname.split('/').pop() || 'index.html'; + const navLinks = document.querySelectorAll('.nav-link'); + + navLinks.forEach(link => { + const href = link.getAttribute('href'); + if (href === currentPage || (currentPage === '' && href === 'index.html')) { + link.classList.add('active'); + } + }); +} + +/** + * Initialize navbar interactions (hamburger menu, dropdown) + */ +function initializeNavbar() { + const hamburger = document.querySelector('.hamburger'); + const navMenu = document.querySelector('.nav-menu'); + const dropdownToggle = document.querySelector('.dropdown-toggle'); + const dropdownSubmenu = document.querySelector('.dropdown-submenu'); + + // Mobile hamburger menu toggle + if (hamburger && navMenu) { + hamburger.addEventListener('click', () => { + navMenu.classList.toggle('active'); + }); + + // Close menu when a nav link is clicked + document.querySelectorAll('.nav-menu .nav-link').forEach(link => { + link.addEventListener('click', (e) => { + // Don't close for the dropdown toggle + if (link.classList.contains('dropdown-toggle')) { + return; + } + navMenu.classList.remove('active'); + }); + }); + } + + // Dropdown menu toggle + if (dropdownToggle && dropdownSubmenu) { + dropdownToggle.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + dropdownSubmenu.classList.toggle('show'); + }); + + // Close dropdown when a submenu link is clicked + dropdownSubmenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + dropdownSubmenu.classList.remove('show'); + navMenu.classList.remove('active'); + }); + }); + + // Close dropdown when clicking outside + document.addEventListener('click', (e) => { + if (!e.target.closest('.dropdown-menu-item')) { + dropdownSubmenu.classList.remove('show'); + } + }); + } +} + +/** + * Initialize Dark Mode functionality + */ +function initializeDarkMode() { + const toggle = document.getElementById('dark-mode-toggle'); + + if (!toggle) return; + + // Restore saved dark mode state on page load + if (localStorage.getItem('darkMode') === 'true') { + document.documentElement.setAttribute('data-theme', 'dark'); + document.body.classList.add('dark'); + toggle.textContent = '☀️ Light Mode'; + } + + // Toggle dark mode on button click + toggle.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + const isDark = document.body.classList.toggle('dark'); + document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); + + localStorage.setItem('darkMode', isDark); + toggle.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode'; + }); +} + +/** + * Fallback navbar creation if component loading fails + */ +function createFallbackNavbar() { + console.warn('Using fallback navbar creation'); + // This can be implemented if needed +} + +// Load navbar when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadNavbar); +} else { + loadNavbar(); +} diff --git a/js/script.js b/js/script.js index 090a982..97ec1c3 100644 --- a/js/script.js +++ b/js/script.js @@ -1,38 +1,3 @@ -// ====================== MOBILE MENU TOGGLE ====================== - -document.addEventListener('DOMContentLoaded', () => { - const hamburger = document.querySelector('.hamburger'); - const navMenu = document.querySelector('.nav-menu'); - - if (hamburger) { - hamburger.addEventListener('click', () => { - navMenu.classList.toggle('active'); - }); - - // Close menu when a link is clicked - document.querySelectorAll('.nav-menu a').forEach(link => { - link.addEventListener('click', () => { - navMenu.classList.remove('active'); - }); - }); - } -}); - -// ====================== ACTIVE NAV HIGHLIGHTING ====================== - -document.addEventListener('DOMContentLoaded', () => { - const currentLocation = location.pathname; - const navLinks = document.querySelectorAll('.nav-menu a'); - - navLinks.forEach(link => { - if (link.getAttribute('href') === currentLocation) { - link.classList.add('active'); - } else { - link.classList.remove('active'); - } - }); -}); - // ====================== CONTACT FORM VALIDATION ====================== const contactForm = document.getElementById('contactForm'); @@ -282,27 +247,4 @@ document.querySelectorAll('.content-section').forEach(section => { // ====================== UTILITY: CONSOLE MESSAGE ====================== console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;'); -console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;'); - -// ====================== DARK MODE TOGGLE ====================== - -document.addEventListener("DOMContentLoaded", () => { - const toggle = document.getElementById("dark-mode-toggle"); - - if (!toggle) return; - - // Beim Laden: gespeicherten Zustand wiederherstellen - if (localStorage.getItem("darkMode") === "true") { - document.body.classList.add("dark"); - toggle.textContent = "☀️ Light Mode"; - } - - // Beim Klick: Zustand umschalten und speichern - toggle.addEventListener("click", (e) => { - e.preventDefault(); - document.body.classList.toggle("dark"); - const isDark = document.body.classList.contains("dark"); - localStorage.setItem("darkMode", isDark); - toggle.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode"; - }); -}); \ No newline at end of file +console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;'); \ No newline at end of file diff --git a/kontakt.html b/kontakt.html index 97cae75..46fe271 100644 --- a/kontakt.html +++ b/kontakt.html @@ -10,36 +10,6 @@ -
- -
@@ -139,6 +109,7 @@ + diff --git a/notenrechner-dom.html b/notenrechner-dom.html index 2864152..d0841d0 100644 --- a/notenrechner-dom.html +++ b/notenrechner-dom.html @@ -12,28 +12,6 @@ -
- -
-
@@ -110,6 +88,7 @@
+ diff --git a/notenrechner.html b/notenrechner.html index 74756e4..2bc7f40 100644 --- a/notenrechner.html +++ b/notenrechner.html @@ -11,28 +11,6 @@ -
- -
-
@@ -88,6 +66,7 @@
+ diff --git a/team.html b/team.html index aabde54..281fbf7 100644 --- a/team.html +++ b/team.html @@ -142,37 +142,6 @@ -
- -
-
@@ -262,6 +231,7 @@ + diff --git a/textanalyse.html b/textanalyse.html index b572701..813c88a 100644 --- a/textanalyse.html +++ b/textanalyse.html @@ -11,28 +11,6 @@ -
- -
-
@@ -74,6 +52,7 @@
+ diff --git a/ueber_uns.html b/ueber_uns.html index 67a7d4a..76ebec1 100644 --- a/ueber_uns.html +++ b/ueber_uns.html @@ -11,37 +11,6 @@ -
- -
-
@@ -122,6 +91,7 @@ +