fix: Navbar-Links und Produktionsbuild anpassen
Emirhan3
parent
33e844423b
commit
48fdb2ecc1
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="de">
|
||||
<head>
|
||||
<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="description"
|
||||
|
|
@ -10,9 +11,7 @@
|
|||
<title>1:1-Ernährungsberatung</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container">
|
||||
<a href="/" aria-label="Startseite">Ernährungsberatung</a>
|
||||
</header>
|
||||
<div id="navbar-placeholder"></div>
|
||||
|
||||
<main class="container">
|
||||
<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">
|
||||
<div class="navbar__inner">
|
||||
<div class="navbar__brand">
|
||||
<img
|
||||
src="/src/components/navigationsbar/images/logo.png"
|
||||
alt=""
|
||||
class="navbar__logo-img"
|
||||
/>
|
||||
<img src="/images/logo.png" alt="" class="navbar__logo-img" />
|
||||
<span class="navbar__brand-text">
|
||||
<span class="navbar__brand-title">TRI-HUB</span>
|
||||
<span class="navbar__brand-tagline"
|
||||
|
|
@ -28,23 +24,37 @@
|
|||
|
||||
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
||||
<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>
|
||||
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/beraterprofil.html" class="navbar__link"
|
||||
<a
|
||||
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||
class="navbar__link"
|
||||
>Beraterprofil</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/faq.html" class="navbar__link">FAQ</a></li>
|
||||
<li>
|
||||
<a href="/rezensionen.html" class="navbar__link"
|
||||
>Rezensionen</a
|
||||
<a
|
||||
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||
class="navbar__link"
|
||||
>FAQ</a
|
||||
>
|
||||
</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>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import navigationHtml from "./navigation.html?raw";
|
||||
|
||||
/**
|
||||
* Lädt das Navbar-Fragment (navigation.html) per fetch() und ersetzt
|
||||
* damit den Platzhalter im Header der jeweiligen Seite.
|
||||
* Bindet das mit Vite gebündelte Navbar-Fragment (navigation.html) ein und
|
||||
* ersetzt damit den Platzhalter im Header der jeweiligen Seite.
|
||||
* Aufruf z. B. in main.js: initNavbar('#navbar-placeholder')
|
||||
*/
|
||||
export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
||||
|
|
@ -10,16 +12,9 @@ export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
|||
return;
|
||||
}
|
||||
|
||||
fetch(new URL("./navigation.html", import.meta.url))
|
||||
.then((res) => res.text())
|
||||
.then((html) => {
|
||||
placeholder.outerHTML = html; // Platzhalter durch echtes Navbar-Markup ersetzen
|
||||
setupBehavior();
|
||||
markCurrentPage();
|
||||
})
|
||||
.catch((err) =>
|
||||
console.error("Navbar konnte nicht geladen werden:", err),
|
||||
);
|
||||
placeholder.outerHTML = navigationHtml; // Platzhalter durch echtes Navbar-Markup ersetzen
|
||||
setupBehavior();
|
||||
markCurrentPage();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import "./styles.css";
|
||||
import "./styles/styles.css";
|
||||
import "./components/navigationsbar/navigation.js";
|
||||
|
||||
document.querySelector("#year").textContent = new Date().getFullYear();
|
||||
|
|
|
|||
Loading…
Reference in New Issue