浏览代码

Adds toggle to header to display menu on mobile

chaptergy 4 年之前
父节点
当前提交
780759dc27
共有 2 个文件被更改,包括 10 次插入5 次删除
  1. 3 0
      frontend/js/app/ui/header/main.ejs
  2. 7 5
      frontend/js/app/ui/main.ejs

+ 3 - 0
frontend/js/app/ui/header/main.ejs

@@ -1,5 +1,8 @@
 <div class="container">
     <div class="d-flex">
+        <button class="navbar-toggler d-lg-none mr-2" type="button" data-toggle="collapse" data-target="#menu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
         <a class="navbar-brand" href="/">
             <img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; <%- i18n('main', 'app') %>
         </a>

+ 7 - 5
frontend/js/app/ui/main.ejs

@@ -1,9 +1,11 @@
 <div class="page-main">
-    <div class="header" id="header">
-        <!-- Header View -->
-    </div>
-    <div id="menu">
-        <!-- Menu View -->
+    <div class="navbar-light">
+        <div class="header" id="header">
+            <!-- Header View -->
+        </div>
+        <div id="menu">
+            <!-- Menu View -->
+        </div>
     </div>
     <div class="my-3 my-md-5">
         <div id="app-content" class="container">