Flarum Bottom Navigation Bar (Alt Menü)

Merhaba arkadaşlar,

FlarumTR uygulamasından esinlenerek yaptığım bottom navigation barı paylaşmak istiyorum.

Geliştirilebilir tabi ki :) Şuan için “soru sor” bölümü api kaynaklı olmadığı için document.selector ile butonu çekip tıklatıyoruz :) Dolayısıyla soru sor butonu sadece ana sayfa ve en yeni bölümlerinde çalışıyor. Bir de active butonu sayfa değiştiği için çok verimli çalışmıyor olabilir :)

Harici Footer kısmına yazılacaklar (sorhadi.net kısmını kendi sitenize göre değiştirirsiniz)

<div class="mobile-app-icon-bar" id="myDIV">
  <button onclick="location.href='https://sorhadi.net'" class="buttonstyle"><i class="fa fa-home"></i>
   <span class="spanstyle">Ana Sayfa</span></button>
  <button  onclick="location.href='https://sorhadi.net/?sort=newest'" class="buttonstyle"><i class="fas fa-hourglass"></i>
   <span class="spanstyle">En yeni</span></button>
  <button onclick="deneme()" class="buttonstyle"><i class="fas fa-plus-square"></i>
   <span class="spanstyle">Soru Sor</span></button>
  <button  onclick="location.href='https://sorhadi.net/tags'" class="buttonstyle"><i class="fas fa-tags"></i>
   <span class="spanstyle">Etiketler</span></button>
<button  onclick="location.href='https://sorhadi.net/notifications'" class="buttonstyle"><i class="fas fa-bell"></i>
   <span class="spanstyle">Bildirim</span></button>
</div>

<script>
 var btnContainer = document.getElementById("myDIV");
 var btns = btnContainer .getElementsByClassName("buttonstyle");
 for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

<script>
function deneme() {
  document.querySelector('.IndexPage-newDiscussion').click();
}
</script>

Harici CSS kodları :

@media(max-width: 500px) { .mobile-app-icon-bar{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  z-index: 2;
  background: #0018ba;
  border: 4px solid #0077b3;
} }

.buttonstyle.active{
 color: #002998 !important;
}

.buttonstyle{
width:20%;
display: flex;
flex-direction: column;
align-items: center;
background: white !important;
border: none;
margin-top: 4px;
}

.spanstyle{
font-size: 10px;
    margin-top: 5px;
}

.mobile-app-icon-bar button {
  padding: 0.75rem !important;
  cursor: pointer;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {

}


@media(min-width: 800px) { .mobile-app-icon-bar{ 
  display:none !important;
} }