Initial commit

HTML/FiveM/assets/components/navbar/index.html

@@ -0,0 +1,13 @@
+<link rel="stylesheet" type="text/css" href="/assets/components/navbar/style.css">
+
+<nav class="navigation unselectable">
+    <a href="/" class="navigation_name">PrincepRP</a>
+    <span id="currentSite"></span>
+    <section>
+        <input class="navigation_button" type="button" value="Regeln" id="redirect_rules">
+        <input class="navigation_button" type="button" value="Autos" id="redirect_cars">
+        <input class="navigation_button" type="button" value="Team" id="redirect_team">
+    </section>
+</nav>
+
+<section class="navigation_spacer"></section>

HTML/FiveM/assets/components/navbar/script.ts

@@ -0,0 +1,23 @@
+const title = document.getElementById("currentSite") as HTMLSpanElement;
+const site = fivem.getCurrentSite();
+switch (site) {
+    case "rules":
+        title.innerText = "Regeln";
+        break;
+    case "cars":
+        title.innerText = "Autos";
+        break;
+    case "team":
+        title.innerText = "Team";
+        break;
+    default:
+        title.innerText = "Startseite";
+        break;
+}
+
+const header_buttons = document.getElementsByClassName("navigation_button") as HTMLCollectionOf<HTMLInputElement>;
+for (let button of header_buttons) {
+    button.onclick = () => {
+        location.href = fivem.hostname + button.id.replace("redirect_", "");
+    }
+}

HTML/FiveM/assets/components/navbar/style.css

@@ -0,0 +1,98 @@
+.navigation {
+    width: 100vw;
+    height: 60px;
+    position: fixed;
+    background: var(--gradient);
+    background-size: 800% 800%;
+    -webkit-animation: BackgroundAnimation 100s ease infinite;
+    -moz-animation: BackgroundAnimation 100s ease infinite;
+    animation: BackgroundAnimation 100s ease infinite;
+    z-index: 10;
+}
+
+@-webkit-keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0% 50%
+    }
+}
+@-moz-keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0 50%
+    }
+}
+@keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0 50%
+    }
+}
+
+.navigation_name {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translate(0, -50%);
+    color: var(--light);
+    font-size: 20px;
+    text-decoration: none;
+}
+
+.navigation_name:hover {
+    cursor: pointer;
+}
+
+#currentSite {
+    position: absolute;
+    font-size: 30px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--light);
+}
+
+.navigation section {
+    position: absolute;
+    width: max-content;
+    top: 50%;
+    left: 100%;
+    transform: translate(-110%, -50%);
+}
+
+.navigation_button {
+    margin: 5px;
+    width: 100px;
+    height: 30px;
+    background: none;
+    border: 2px solid var(--light);
+    border-radius: 10px;
+    color: var(--light);
+    transition: 200ms;
+}
+
+.navigation_button:hover {
+    background: var(--light);
+    color: var(--dark);
+    cursor: pointer;
+}
+
+.navigation_spacer {
+    width: 100vw;
+    height: 60px;
+}