menubutton on small screen and syslog refresh button

src/web/css/header.css

@@ -13,6 +13,18 @@ header {
     gap: 10px;
 }
 
+#headermenubutton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    transition: 0.3s;
+}
+
 .userbuttons {
     display: flex;
     align-items: center;
@@ -27,3 +39,32 @@ header {
         font-size: 15px;
     }
 }
+
+@media screen and (max-width: 600px) {
+    .links {
+        position: absolute;
+        top: 10px;
+        left: 10;
+        height: 0;
+        overflow: hidden;
+        flex-direction: column;
+        transition: 0.3s;
+    }
+
+    .links.active {
+        height: max-content;
+        background-color: gray;
+        z-index: 10;
+        border-radius: 10px;
+    }
+
+    #headermenubutton {
+        position: relative;
+        width: fit-content;
+        height: fit-content;
+        overflow: hidden;
+        padding: 10px;
+        /* margin: 0; */
+
+    }
+}

src/web/css/syslog.css

@@ -15,6 +15,12 @@
     pointer-events: all;
 }
 
+.syslogheader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .syslogdata {
     width: 100%;
     max-height: 85vh;

src/web/index.html

@@ -17,6 +17,7 @@
     <section class="adminpanel">
         <!-- header -->
         <header class="header">
+            <button id="headermenubutton">&#9636;</button>
             <div class="links">
                 <button class="linkbutton" id="syslogbutton">Syslog</button>
                 <button class="linkbutton" id="settingsbutton">Settings</button>
@@ -147,7 +148,10 @@
             </section>
             <!-- syslog block -->
             <section class="syslogsection">
-                <h2 class="syslogheader">Syslog</h2>
+                <div class="syslogheader">
+                    <h2 class="syslogheader">Syslog</h2>
+                    <button id="refreshbutton">&#8634;</button>
+                </div>
                 <div class="syslogdata"></div>
             </section>
             <!-- syslog block -->

src/web/js/header.js

@@ -3,6 +3,10 @@ const settingsbutton = document.querySelector('#settingsbutton')
 const syslogsection = document.querySelector('.syslogsection')
 const syslogbutton = document.querySelector('#syslogbutton')
 
+const headermenubutton = document.querySelector('#headermenubutton')
+const headerlinks = document.querySelector('.links')
+// const header = document.querySelector('.header')
+
 settingsbutton.addEventListener('click', () => {
     settingssection.classList.add('active')
     syslogsection.classList.remove('active')
@@ -13,3 +17,23 @@ syslogbutton.addEventListener('click', () => {
     settingssection.classList.remove('active')
     get_syslog_data()
 })
+
+headermenubutton.addEventListener('click', () => {
+    if (headerlinks.classList.contains('active')){
+        headerlinks.classList.remove('active')
+        return
+    }
+    headerlinks.classList.add('active')
+})
+
+window.addEventListener('click', (e) => {
+    if (e.target.id !== "headermenubutton" && !e.target.classList.contains('links')) {
+        headerlinks.classList.remove('active')
+    }
+})
+
+// if (window.screenX > 600) {
+//     header.removeChild(headermenubutton)
+// } else {
+//     header.prepend(headermenubutton)
+// }

src/web/js/login.js

@@ -12,6 +12,7 @@ if (localStorage.getItem("token") === null) {
 } else {
     get_all_settings()
     adminpanelsection.classList.add('active')
+    settingssection.classList.add('active')
     headerusername.innerHTML = JSON.parse(localStorage.getItem('userdata')).username
 }
 

src/web/js/syslog.js

@@ -1,4 +1,5 @@
 const syslogdata = document.querySelector('.syslogdata')
+const refreshbutton = document.querySelector('#refreshbutton')
 
 const get_syslog_data = () => {
     console.log("get_syslog_data")
@@ -6,8 +7,10 @@ const get_syslog_data = () => {
         method: 'GET',
         // body: `{"token":"${localStorage.getItem("token")}"}`
     }).then(data => data.text()).then(textdata => {
-        syslogdata.innerHTML = textdata.replace('/\n/g','<br>')
+        syslogdata.innerHTML = textdata.replace(/\n/g,'<br>')
     }).catch((error) => {
         notification(`Ошибка на сервере: ${error}`, "error")
     })
 }
+
+refreshbutton.addEventListener('click', get_syslog_data)