diff --git a/js/customElements/header.js b/js/customElements/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c3622df803cd4b1039baa9143d475e270e92a66
--- /dev/null
+++ b/js/customElements/header.js
@@ -0,0 +1,25 @@
+class Header extends HTMLElement {
+ constructor() {
+ super();
+ let pageTitle = this.getAttribute("data-title");
+ this.innerHTML = `
+ <header >
+ <div class="header-wrapper" >
+ <div class="header-homepage">
+ <div class="align-holder" >
+ <h1>${pageTitle}</h1 >
+ </div >
+ </div >
+ <div class="header-separator header-separator-bottom " >
+ <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 100" preserveAspectRatio = "none" >
+ <path class="svg-white-bg" d = "M737.9,94.7L0,0v100h1000V0L737.9,94.7z" ></path >
+ </svg >
+ </div >
+ </div >
+ <jl-main_menu id = "mainMenu"></jl-main_menu>
+ </header >
+ `;
+ }
+}
+
+customElements.define("jl-header", Header);
\ No newline at end of file
diff --git a/js/customElements/mainMenu.js b/js/customElements/mainMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..9be85c5f8248e0dddf8544781a8fd4703090be13
--- /dev/null
+++ b/js/customElements/mainMenu.js
@@ -0,0 +1,51 @@
+class MainMenu extends HTMLElement {
+ constructor() {
+ super();
+ this.generateMenu();
+ }
+
+ async generateMenu(){
+ let menu = await (await fetch("/API/mainMenu.php")).json();
+ let menuContainer = document.createElement("div");
+ menuContainer.className = "mainMenuContainer";
+
+ menu.forEach((element) => {
+ if(element["type"] === "link"){
+ let a = document.createElement("a");
+ a.href = element["url"];
+ a.innerText = element["name"];
+
+ menuContainer.appendChild(a);
+ } else if(element["type"] === "dropdown"){
+ let dropdown = document.createElement("div");
+ dropdown.className = "dropdown";
+
+ let a = document.createElement("a");
+ a.href = element["url"];
+ a.innerText = element["name"];
+
+ dropdown.appendChild(a)
+ let dropdownContent = document.createElement("div");
+ dropdownContent.className = "dropdown-content"
+
+ element["childElements"].forEach((childElement) => {
+ let a = document.createElement("a");
+ a.href = childElement["url"];
+ a.innerText = childElement["name"];
+
+ dropdownContent.appendChild(a);
+
+ let br = document.createElement("br");
+ dropdownContent.appendChild(br);
+ });
+
+ dropdown.appendChild(dropdownContent);
+ menuContainer.appendChild(dropdown);
+ }
+ });
+
+ this.appendChild(menuContainer);
+ }
+}
+
+customElements.define("jl-main_menu", MainMenu);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 9662cc2cfca4eb6ba7de629a681890b4bab5fea1..0f02d0e8cb776bd4651e695a6bdd7a4ae95d4dd0 100644
--- a/js/script.js
+++ b/js/script.js
@@ -11,4 +11,6 @@ require("./customElements/blogFooter");
require("./customElements/blogIndex");
require("./customElements/commentsDisplay");
require("./customElements/newComment");
-require("./customElements/contactMailButton");
\ No newline at end of file
+require("./customElements/contactMailButton");
+require("./customElements/header");
+require("./customElements/mainMenu");
\ No newline at end of file
diff --git a/public/API/mainMenu.php b/public/API/mainMenu.php
new file mode 100644
index 0000000000000000000000000000000000000000..f867cf425391b275c7d93d58b2a4f8c2455d8137
--- /dev/null
+++ b/public/API/mainMenu.php
@@ -0,0 +1,160 @@
+<?php
+$responseJSON = [
+ [
+ "name" => "Startseite",
+ "url" => "/",
+ "type" => "link"
+ ],
+ [
+ "name" => "Projekte",
+ "url" => "#",
+ "type" => "dropdown",
+ "childElements" => [
+ [
+ "name" => "Proxdroid - Proxmox Android App",
+ "url" => "/Projekte/proxdroid.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Website Cloner",
+ "url" => "/Projekte/websitecloner.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "YouTube Downloader",
+ "url" => "/Projekte/youtubedownloader.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "MQTT Push",
+ "url" => "/Projekte/mqttpush.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Geocaching Premium Log link Generator",
+ "url" => "/Projekte/gclogLink.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "LED Tisch Version 1",
+ "url" => "/Projekte/ledtisch1.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "LED Tisch Version 2",
+ "url" => "/Projekte/ledtisch2.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Regensensor",
+ "url" => "/Projekte/regensensor.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Blitzortung",
+ "url" => "/Projekte/blitzortung.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Insecam",
+ "url" => "/Projekte/insecam.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "URL Kürzer V1",
+ "url" => "/Projekte/URLkuerzer1.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "URL Küzer V2",
+ "url" => "/Projekte/URLkuerzer2.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Smart Mirror",
+ "url" => "/Projekte/smartmirror.php",
+ "type" => "link"
+ ],
+ [
+ "name" => "Installation von Snowboy",
+ "url" => "/Projekte/snowboy.php",
+ "type" => "link"
+ ]
+
+ ]
+ ],
+ [
+ "name" => "Services",
+ "url" => "#",
+ "type" => "dropdown",
+ "childElements" => [
+ [
+ "name" => "URL Kürzer",
+ "url" => "//kuerzer.ml",
+ "type" => "link"
+ ],
+ [
+ "name" => "Privnote",
+ "url" => "//privnote.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "Hastebin",
+ "url" => "//paste.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "Gitlab",
+ "url" => "//gitlab.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "APT mirror",
+ "url" => "//apt.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "Speedtest",
+ "url" => "//speed.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "Matrix",
+ "url" => "//chat.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "XMLTV TV Programm",
+ "url" => "//xmltv.jonasled.de",
+ "type" => "link"
+ ],
+ ]
+ ],
+ [
+ "name" => "Status",
+ "url" => "#",
+ "type" => "dropdown",
+ "childElements" => [
+
+ [
+ "name" => "Server",
+ "url" => "//status.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "Discord Bots",
+ "url" => "//discordstatus.jonasled.de",
+ "type" => "link"
+ ],
+ [
+ "name" => "NTP Server",
+ "url" => "/ntpstatus.php",
+ "type" => "link"
+ ],
+ ]
+ ]
+];
+
+
+header('Content-Type: application/json');
+echo json_encode($responseJSON);
\ No newline at end of file
diff --git a/public/internal/header.php b/public/internal/header.php
index a94163da58a803ed53d8dcc868a980625f33518d..b065e9ec1deddb248a488226f4ecc72d537d5c89 100644
--- a/public/internal/header.php
+++ b/public/internal/header.php
@@ -1,17 +1,8 @@
<?php
-function getHeader($pagetitle, $navselect)
+function getHeader($pagetitle)
{
include "config.php";
- include "menu.php";
-
- $menu = getMenu($navselect);
- if (strpos($_SERVER['HTTP_HOST'], '.onion') !== false) {
- $trackURL = $trackURLTor;
- } else {
- $trackURL = $trackURLNormal;
- }
-
echo(<<<EOF
<!DOCTYPE html >
<html lang = "de" >
@@ -24,24 +15,10 @@ function getHeader($pagetitle, $navselect)
<link href = "/css/style.css" rel = "stylesheet" >
</head >
<body >
- <header >
- <div class="header-wrapper" >
- <div class="header-homepage">
- <div class="align-holder" >
- <h1>$pagetitle</h1 >
- </div >
- </div >
- <div class="header-separator header-separator-bottom " >
- <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 100" preserveAspectRatio = "none" >
- <path class="svg-white-bg" d = "M737.9,94.7L0,0v100h1000V0L737.9,94.7z" ></path >
- </svg >
- </div >
- </div >
- <div id = "mainMenu">$menu</div >
- </header >
+ <jl-header data-title="$pagetitle"></jl-header>
<div id = "content" >
<!--Matomo Image Tracker -->
- <img src = "$trackURL" style = "border:0" alt = "" />
+ <img src = "" style = "border:0" alt = "" />
<!--End Matomo -->
EOF);
}
\ No newline at end of file
diff --git a/public/internal/menu.php b/public/internal/menu.php
deleted file mode 100644
index 41f2c31cd3c2a73a4f027097cd12746685030dc7..0000000000000000000000000000000000000000
--- a/public/internal/menu.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-function getMenu($page){
- $startpage = $page == "home" ? "class=\"menueSelected\"" : "";
- $projects = $page == "projekte" ? "class=\"menueSelected\"" : "";
- $status = $page == "status" ? "class=\"menueSelected\"" : "";
-
- return <<<EOF
- <div id="burgerMenu">
- <div class="bar1"></div>
- <div class="bar2"></div>
- <div class="bar3"></div>
- </div>
- <div id="mainMenuContainer">
- <a href="/" $startpage>Startseite</a>
- <div class="dropdown">
- <a href="#" $projects>Projekte</a>
- <div class="dropdown-content">
- <a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br>
- <a href="/Projekte/websitecloner.php">Website Cloner</a><br>
- <a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br>
- <a href="/Projekte/mqttpush.php">MQTT Push</a><br>
- <a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br>
- <a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br>
- <a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br>
- <a href="/Projekte/regensensor.php">Regensensor</a><br>
- <a href="/Projekte/blitzortung.php">Blitzortung</a><br>
- <a href="/Projekte/insecam.php">Insecam</a><br>
- <a href="/Projekte/URLkuerzer1.php">URL Kürzer V1</a><br>
- <a href="/Projekte/URLkuerzer2.php">URL Kürzer V2</a><br>
- <a href="/Projekte/smartmirror.php">Smart Mirror</a><br>
- <a href="/Projekte/snowboy.php">Installation von Snowboy</a><br>
- </div>
- </div>
- <div class="dropdown">
- <a href="#">Services</a>
- <div class="dropdown-content">
- <a href="//kuerzer.ml">URL Kürzer</a><br>
- <a href="//privnote.jonasled.de">Privnote</a><br>
- <a href="//paste.jonasled.de">Hastebin</a><br>
- <a href="//gitlab.jonasled.de">Gitlab</a><br>
- <a href="//apt.jonasled.de">APT mirror</a><br>
- <a href="//speed.jonasled.de">Speedtest</a><br>
- <a href="//chat.jonasled.de">Matrix</a><br>
- <a href="//xmltv.jonasled.de">XMLTV TV Programm</a><br>
- </div>
- </div>
- <div class="dropdown">
- <a href="#" $status>Status</a>
- <div class="dropdown-content">
- <a href="//status.jonasled.de">Server</a><br>
- <a href="//discordstatus.jonasled.de">Discord Bots</a><br>
- <a href="/ntpstatus.php">NTP Server</a><br>
- </div>
- </div>
- </div>
-EOF;
-}
-?>