Hup.hu mobil design

hup.hu.mobile.user.js

// ==UserScript==
// @name         hup.hu.mobile
// @namespace    https://gist.github.com/hunsly/3b0de70430d9f231b510f2750d3d5f91/
// @version      0.2
// @description  Top menut alakit ki az oldal tetejen
// @author       hunsly
// @updateURL      https://gist.github.com/hunsly/3b0de70430d9f231b510f2750d3d5f91/raw/hup.hu.mobile.user.js
// @downloadURL    https://gist.github.com/hunsly/3b0de70430d9f231b510f2750d3d5f91/raw/hup.hu.mobile.user.js
// @match        https://hup.hu/*
// @grant        none
// ==/UserScript==

(function() {

    var obj2 = document.querySelectorAll('#block-block-3 .item-list UL LI');
var menuTemp = "";
    obj2.forEach(
        function(currentValue, currentIndex, listObj) {
               menuTemp +=    `<a href="` + currentValue.querySelector('A').href + `">` + currentValue.querySelector('A').innerText + `</a>`;
        });


     var userMenu =  '';
    if(document.querySelector('#block-user-1 .content') !== null) {
          userMenu =  ` <a href="#" onclick="document.getElementById('usermenu').style.display = (document.getElementById('usermenu').style.display == 'none') ? '' : 'none'">+ Usermenu (` + document.querySelector('#block-user-1 H2').innerText + `)</a>
<div style="display:none;margin-left:5%" id="usermenu">
 ` + document.querySelector('#block-user-1 .content').innerHTML + `</div> `;
    }

    if(document.querySelector('#block-user-0 .content') !== null) {
          userMenu +=  ` <a href="#" onclick="document.getElementById('loginmenu').style.display = (document.getElementById('loginmenu').style.display == 'none') ? '' : 'none'">+ ` + document.querySelector('#block-user-0 H2').innerText + `</a>
<div style="display:none;margin-left:5%" id="loginmenu">
 ` + document.querySelector('#block-user-0 .content').innerHTML + `</div> `;
    }
    if(document.querySelector('#block-blog-0 .content') !== null) {
          userMenu +=  ` <a href="#" onclick="document.getElementById('blogmenu').style.display = (document.getElementById('blogmenu').style.display == 'none') ? '' : 'none'">+ ` + document.querySelector('#block-blog-0 H2').innerText + `</a>
<div style="display:none;margin-left:5%" id="blogmenu">
 ` + document.querySelector('#block-blog-0 .content').innerHTML + `</div> `;
    }

 document.body.innerHTML += `<style>




.topnav {
display:none;
  overflow: hidden;
  background-color: #333;
  position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
}

.topnav a, .topnav a:visited, .topnav a:link {
  float: left;
display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 1em ;
  text-decoration: none;
  font-size: 100%;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
  font-size: 80%;

}


  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
}



#sidebar-left > div#block-block-3 {
display:none;
}

body {margin-top: 3em}
  .topnav {
display:block;
}
  .topnav.responsive {

  position: fixed;
  right: 0;
  top: 0;
  overflow: auto;
  height:100vh;

}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


</style>
<div class="topnav" id="myTopnav">
  <a href="/">HUP.hu</a>
  <a href="#" onclick="document.getElementById('menu').style.display = (document.getElementById('menu').style.display == 'none') ? '' : 'none'">+ HUP menu</a>
<div style="display:none;margin-left:5%" id="menu">
 ` + menuTemp + `
</div>
 ` + userMenu + `

  <a href="javascript:void(0);" id="respmenu" class="icon">&#9776;</a>
</div>

`;

document.getElementById("respmenu").onclick = function () {
    var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
})();