initial draft of mobile nav

Signed-off-by: MiniDigger <admin@minidigger.me>

src/main/frontend/src/entrypoints/font-awesome.js

@@ -5,6 +5,7 @@ import {
     faArrowRight,
     faArrowsAltV,
     faAsterisk,
+    faBars,
     faBell,
     faBirthdayCake,
     faBook,
@@ -184,7 +185,8 @@ library.add(
     faBirthdayCake,
     faArrowsAltV,
     faUndo,
-    faCopy
+    faCopy,
+    faBars,
 );
 
 dom.watch();

src/main/frontend/src/scss/_nav.scss

@@ -140,3 +140,17 @@ li.new-controls {
     top: -4px;
   }
 }
+
+.navbar-toggler {
+  float: right;
+  padding: 10px;
+  margin: 10px 10px 0 0;
+  color: white;
+}
+
+@media (max-width: 767px){
+  .navbar-nav {
+    flex-direction: row;
+    margin: 0 20px 20px 0;
+  }
+}

src/main/frontend/src/scss/_topbar.scss

@@ -19,7 +19,7 @@ $sp_logo_width: 220px;
 
   width: 100%;
   //max-width: 1920px;
-  height: $sp_topbar_height;
+  //height: $sp_topbar_height;
 
   background-color: $sponge_grey;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);

src/main/resources/templates/layout/header.ftlh

@@ -49,7 +49,10 @@
             <#assign Permission=@helper["io.papermc.hangar.model.Permission"] />
             <#-- @ftlvariable name="Permission" type="io.papermc.hangar.model.Permission" -->
             <#if authEnabled>
-                <div class="collapse navbar-collapse float-right navbar-right">
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+                    <i class="fa-fw fas fa-bars"></i>
+                </button>
+                <div class="collapse navbar-collapse float-right navbar-right" id="navToggle">
                     <ul class="nav navbar-nav">
                         <#assign title><@spring.message "project.viewAuthors"/></#assign>
                         <li class="nav-icon authors-icon" <@tooltip title=title />>