Header Searchbar center fix, Search page integration

static/css/header.css

@@ -1,12 +1,23 @@
 /* UTIL */
- .vertical-center {
+.vertical-center {
     float: left;
     top: 50%;
     position: relative;
     transform: translateY(-50%);
 }
 
+body {
+    margin: 0;
+}
+
+
 /* BACKGROUND */
+.headerDIV {
+    width: 100%;
+    height: 65px;
+    background-color: #414854;
+    margin: 0;
+}
 .headerDIV > div {
     height: 100%;
     text-align: center;
@@ -16,7 +27,7 @@
 
 /* LOGO PART */
 .headerDIVLogo {
-    width: 35px;
+    width: 20%;
 }
 .headerDIVLogo > img {
     float: left;
@@ -47,11 +58,21 @@
     height: 30px;
 }
 
+/* LOGIN PART */
+.headerDIVLogin {
+    width: 20%;
+}
+.headerDIVLogin > button {
+    height: 30px;
+    float: right;
+    margin-right: 10px;
+}
+
 /* BUTTON PART */
-.headerDIVButton {
+.headerDIVUser {
     float: right;
 }
-.headerDIVButton button {
+.headerDIVUser button {
     height: 30px;
     float: right;
     margin-right: 5px;
@@ -77,20 +98,6 @@
     background-color: rgb(206, 50, 50);
 }
 
-
-.headerDIVButton > button:hover {
+.headerDIVUser > button:hover {
     background-color: rgb(23, 114, 167);
 }
-
-.headerDIV {
-    width: 100%;
-    height: 65px;
-    background-color: #414854;
-    margin: 0;
-}
-
-@media only screen and (max-width: 800px) {
-    .headerDIVSearch {
-        
-    }
-  }

views/partials/header.ejs

@@ -1,10 +1,14 @@
 <div class="headerDIV">
     <div class="headerDIVLogo">
-        <img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
-    </div><div class="headerDIVSearch">
-        <input placeholder="Suche" class="vertical-center"></input
-        ><button class="vertical-center"><i class="material-icons">search</i></button>
-    </div><div class="headerDIVButton">
+        <img style="cursor:pointer" onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
+    </div>
+
+    <div class="headerDIVSearch">
+        <input placeholder="Suche" class="vertical-center" id="searchbar" value="<%=typeof search !== 'undefined' ? search : '' %>"></input>
+        <button class="vertical-center" onclick="doSearch()"><i class="material-icons">search</i></button>
+    </div>
+
+    <div class="headerDIVUser">
         <% if(user){ %>
             <button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button>
             <button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button>
@@ -14,3 +18,21 @@
         <% } %>
     </div>
 </div>
+
+
+<script>
+    var input = document.getElementById("searchbar");
+    input.addEventListener("keyup", function(event) {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            doSearch();
+        }
+    });
+
+    function doSearch() {
+        var val = input.value.trim()
+        if (val) {
+            window.open('/search/'+val, '_self')
+        }
+    }
+</script>