From c5385e834b82294a80f4c3c6668e218712503b1d Mon Sep 17 00:00:00 2001
From: Alexander J <odyssey346@disroot.org>
Date: Sat, 14 May 2022 14:50:18 +0200
Subject: [PATCH] Responsive

Signed-off-by: Alexander J <odyssey346@disroot.org>
---
 src/assets/global.css | 16 ++++++++++++++++
 src/lib/Header.svelte | 25 +++++++++++++++++++------
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/assets/global.css b/src/assets/global.css
index 4ec2b52..b83dd36 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -86,6 +86,10 @@ a.visited {
         word-wrap: break-word;
 }
 
+#MenuButton {
+        display: none;
+}
+
 @media screen and (max-width: 800px) {
   .card {
     flex-direction: column;
@@ -93,4 +97,16 @@ a.visited {
   .ResponsiveImage {
         max-inline-size: 100%;
   }
+
+  .navbarpieceofshitfuckihatethis {display: none;}
+
+  .navbarpieceofshitfuckihatethis.responsive {display: initial;}
+  /*.navbarpieceofshitfuckihatethis.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }*/
+  #MenuButton {
+        display: initial;
+  }
 }
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 80abb24..de09fa8 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -1,11 +1,28 @@
 <script lang="ts">
 	import css from "../assets/animation.css";
 	import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
+    function showResponsive() {
+        var x = document.getElementById("navbarpieceofshitfuckihatethis");
+        var navbarClasses = x.classList;
+        var navbarClassesString = navbarClasses.toString();
+        const svelteclassthing = navbarClasses.item(2)
+        console.log(navbarClasses);
+        if (x.className === "center navbarpieceofshitfuckihatethis", svelteclassthing) {
+            console.log("Shit");
+            navbarClasses.add("responsive");
+        }
+
+        if (navbarClassesString.includes("responsive")){
+            console.log("Piss");
+            navbarClasses.remove("responsive");
+        }
+    };
 </script>
-<header>
+<header id="navigationBar" class="navigvationBar">
     <img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="project segfault's logo." />
     <a href="/" class="text-flicker-in-glow" style="color: #ce1717">Project <span style="color: #00d4aa">Segfault</span></a> 
-   <div class="center">
+    <a href="javascript:void(0)" class="button" id="MenuButton" on:click={showResponsive}>Menu</a>
+   <div class="center navbarpieceofshitfuckihatethis" id="navbarpieceofshitfuckihatethis">
     <a href="/instances" class="button">Instances</a>
     
     <a href="/gameservers" class="button">Games</a>
@@ -23,7 +40,6 @@
         background-color: #252525;
         border: solid #252525;
         border-width: 1em;
-        border-radius: 8px;
     }
     #ProjectSegfaultLogoHeader {
         /*Here goes anything to do with the header logo*/
@@ -32,9 +48,6 @@
 	    vertical-align: middle;
 	    display: inline-block;
     }
-    .center {
-	    text-align: center;
-    }
     .text-flicker-in-glow {
 	    opacity:1;
         -webkit-animation: text-flicker-in-glow 3000ms both;