fix: Navbar-Links und Produktionsbuild anpassen
Emirhan3
parent
33e844423b
commit
48fdb2ecc1
|
|
@ -2,6 +2,7 @@
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
|
|
@ -10,9 +11,7 @@
|
||||||
<title>1:1-Ernährungsberatung</title>
|
<title>1:1-Ernährungsberatung</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="container">
|
<div id="navbar-placeholder"></div>
|
||||||
<a href="/" aria-label="Startseite">Ernährungsberatung</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<h1>Ernährung, die zu dir passt.</h1>
|
<h1>Ernährung, die zu dir passt.</h1>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -0,0 +1,14 @@
|
||||||
|
# Navigation einbinden
|
||||||
|
|
||||||
|
Füge an der gewünschten Stelle im HTML einen Platzhalter ein und binde CSS
|
||||||
|
und JavaScript separat ein:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="navbar-placeholder"></div>
|
||||||
|
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||||
|
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
Das Script lädt `navigation.html` und initialisiert die Navigation automatisch,
|
||||||
|
`initNavbar()` muss nicht zusätzlich aufgerufen werden. Die Stylesheet-Datei wird
|
||||||
|
nicht vom Script geladen und muss deshalb separat eingebunden werden.
|
||||||
|
|
@ -3,11 +3,7 @@
|
||||||
<header class="navbar" id="site-navbar">
|
<header class="navbar" id="site-navbar">
|
||||||
<div class="navbar__inner">
|
<div class="navbar__inner">
|
||||||
<div class="navbar__brand">
|
<div class="navbar__brand">
|
||||||
<img
|
<img src="/images/logo.png" alt="" class="navbar__logo-img" />
|
||||||
src="/src/components/navigationsbar/images/logo.png"
|
|
||||||
alt=""
|
|
||||||
class="navbar__logo-img"
|
|
||||||
/>
|
|
||||||
<span class="navbar__brand-text">
|
<span class="navbar__brand-text">
|
||||||
<span class="navbar__brand-title">TRI-HUB</span>
|
<span class="navbar__brand-title">TRI-HUB</span>
|
||||||
<span class="navbar__brand-tagline"
|
<span class="navbar__brand-tagline"
|
||||||
|
|
@ -28,23 +24,37 @@
|
||||||
|
|
||||||
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
||||||
<ul id="navbar-menu" class="navbar__menu">
|
<ul id="navbar-menu" class="navbar__menu">
|
||||||
<li><a href="/pakete.html" class="navbar__link">Pakete</a></li>
|
<li>
|
||||||
|
<a href="/angebotsuebersicht.html" class="navbar__link"
|
||||||
|
>Pakete</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/beraterprofil.html" class="navbar__link"
|
<a
|
||||||
|
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||||
|
class="navbar__link"
|
||||||
>Beraterprofil</a
|
>Beraterprofil</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="/faq.html" class="navbar__link">FAQ</a></li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="/rezensionen.html" class="navbar__link"
|
<a
|
||||||
>Rezensionen</a
|
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||||
|
class="navbar__link"
|
||||||
|
>FAQ</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/kontakt.html" class="navbar__link">Kontakt</a>
|
<a href="#erfahrungen" class="navbar__link">Rezensionen</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||||
|
class="navbar__link"
|
||||||
|
>Kontakt</a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
|
import navigationHtml from "./navigation.html?raw";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Lädt das Navbar-Fragment (navigation.html) per fetch() und ersetzt
|
* Bindet das mit Vite gebündelte Navbar-Fragment (navigation.html) ein und
|
||||||
* damit den Platzhalter im Header der jeweiligen Seite.
|
* ersetzt damit den Platzhalter im Header der jeweiligen Seite.
|
||||||
* Aufruf z. B. in main.js: initNavbar('#navbar-placeholder')
|
* Aufruf z. B. in main.js: initNavbar('#navbar-placeholder')
|
||||||
*/
|
*/
|
||||||
export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
||||||
|
|
@ -10,16 +12,9 @@ export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(new URL("./navigation.html", import.meta.url))
|
placeholder.outerHTML = navigationHtml; // Platzhalter durch echtes Navbar-Markup ersetzen
|
||||||
.then((res) => res.text())
|
|
||||||
.then((html) => {
|
|
||||||
placeholder.outerHTML = html; // Platzhalter durch echtes Navbar-Markup ersetzen
|
|
||||||
setupBehavior();
|
setupBehavior();
|
||||||
markCurrentPage();
|
markCurrentPage();
|
||||||
})
|
|
||||||
.catch((err) =>
|
|
||||||
console.error("Navbar konnte nicht geladen werden:", err),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
import "./styles.css";
|
import "./styles/styles.css";
|
||||||
|
import "./components/navigationsbar/navigation.js";
|
||||||
|
|
||||||
document.querySelector("#year").textContent = new Date().getFullYear();
|
document.querySelector("#year").textContent = new Date().getFullYear();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue