Toggle mobile view menu by js

app/controllers/common.php

@@ -69,11 +69,6 @@ Router\get_action('show-help', function () {
     Response\html(Template\load('show_help'));
 });
 
-// Show the menu for the mobile view
-Router\get_action('more', function () {
-    Response\html(Template\layout('show_more', array('menu' => 'more')));
-});
-
 // Image proxy (avoid SSL mixed content warnings)
 Router\get_action('proxy', function () {
     Handler\Proxy\download(rawurldecode(Request\param('url')));

app/templates/layout.php

@@ -29,30 +29,40 @@
             <nav>
                 <a class="logo" href="?"><?= tne('mini%sflux%s','<span>','</span>') ?></a>
                 <ul>
-                    <li <?= isset($menu) && $menu === 'unread' ? 'class="active"' : '' ?>>
+                    <li<?= isset($menu) && $menu === 'unread' ? ' class="active"' : '' ?>>
                         <a href="?action=unread"><?= t('unread') ?><span id="nav-counter"><?= empty($nb_unread_items) ? '' : $nb_unread_items ?></span></a>
                     </li>
-                    <li class="<?= isset($menu) && $menu === 'bookmarks' ? 'active hide-mobile' : 'hide-mobile' ?>">
+                    <li class="hide-mobile<?= isset($menu) && $menu === 'bookmarks' ? ' active' : '' ?>">
                         <a href="?action=bookmarks"><?= t('bookmarks') ?></a>
                     </li>
-                    <li class="<?= isset($menu) && $menu === 'history' ? 'active hide-mobile' : 'hide-mobile' ?>">
+                    <li class="hide-mobile<?= isset($menu) && $menu === 'history' ? ' active' : '' ?>">
                         <a href="?action=history"><?= t('history') ?></a>
                     </li>
-                    <li class="<?= isset($menu) && $menu === 'feeds' ? 'active hide-mobile' : 'hide-mobile' ?>">
+                    <li class="hide-mobile<?= isset($menu) && $menu === 'feeds' ? ' active' : '' ?>">
                         <a href="?action=feeds"><?= t('subscriptions') ?></a>
                     </li>
-                    <li class="<?= isset($menu) && $menu === 'config' ? 'active hide-mobile' : 'hide-mobile' ?>">
+                    <li class="hide-mobile<?= isset($menu) && $menu === 'config' ? 'active' : '' ?>">
                         <a href="?action=config"><?= t('preferences') ?></a>
                     </li>
                     <li class="hide-mobile">
                         <a href="?action=logout"><?= t('logout') ?></a>
                     </li>
-                    <li class="<?= isset($menu) && $menu === 'more' ? 'active hide-desktop' : 'hide-desktop' ?>">
+                    <li class="hide-desktop">
-                        <a href="?action=more">∨ <?= t('menu') ?></a>
+                        <span data-action="toggle-menu-more" class="menu-more-switcher" href="#">∨ <?= t('menu') ?></span>
                     </li>
                 </ul>
             </nav>
         </header>
+        <div id="menu-more" class="hide">
+            <ul>
+                <li<?= isset($menu) && $menu === 'unread' ? ' class="active"' : '' ?>><a href="?action=unread"><?= t('unread') ?></a></li>
+                <li<?= isset($menu) && $menu === 'bookmarks' ? ' class="active"' : '' ?>><a href="?action=bookmarks"><?= t('bookmarks') ?></a></li>
+                <li<?= isset($menu) && $menu === 'history' ? ' class="active"' : '' ?>><a href="?action=history"><?= t('history') ?></a></li>
+                <li<?= isset($menu) && $menu === 'feeds' ? ' class="active"' : '' ?>><a href="?action=feeds"><?= t('subscriptions') ?></a></li>
+                <li<?= isset($menu) && $menu === 'config' ? ' class="active"' : '' ?>><a href="?action=config"><?= t('preferences') ?></a></li>
+                <li><a href="?action=logout"><?= t('logout') ?></a></li>
+            </ul>
+        </div>
         <section class="page" data-item-page="<?= $menu ?>">
             <?= Miniflux\Helper\flash('flash_message', '<div class="alert alert-success">%s</div>') ?>
             <?= Miniflux\Helper\flash('flash_error_message', '<div class="alert alert-error">%s</div>') ?>

app/templates/show_more.php

@@ -1,22 +0,0 @@
-<div class="menu-more">
-<ul>
-    <li>
-        <a href="?action=unread"><?= t('unread') ?></a>
-    </li>
-    <li>
-        <a href="?action=bookmarks"><?= t('bookmarks') ?></a>
-    </li>
-    <li>
-        <a href="?action=history"><?= t('history') ?></a>
-    </li>
-    <li>
-        <a href="?action=feeds"><?= t('subscriptions') ?></a>
-    </li>
-    <li>
-        <a href="?action=config"><?= t('preferences') ?></a>
-    </li>
-    <li>
-        <a href="?action=logout"><?= t('logout') ?></a>
-    </li>
-</ul>
-</div>

assets/css/app.css

@@ -442,6 +442,11 @@ header a {
     text-decoration: none;
 }
 
+nav .menu-more-switcher {
+    color: #777;
+    cursor: pointer;
+}
+
 nav .active a {
     color: #333;
     font-weight: bold;
@@ -793,7 +798,11 @@ iframe {
     font-size: 75%;
 }
 
-.menu-more li {
+#menu-more {
+    padding-top: 20px;
+}
+
+#menu-more li {
     font-size: 1.1em;
     padding-top: 10px;
     padding-bottom: 10px;
@@ -801,9 +810,13 @@ iframe {
     list-style-type: none;
 }
 
-.menu-more a {
+#menu-more li.active a {
-    text-decoration: none;
     color: #333;
+}
+
+#menu-more a {
+    text-decoration: none;
+    color: #777;
     display: block;
 }
 

assets/js/all.js

@@ -602,6 +602,9 @@ Miniflux.Event = (function() {
                         case 'show-search':
                             Miniflux.Nav.ShowSearch();
                             break;
+                       case 'toggle-menu-more':
+                            Miniflux.Nav.ToggleMenuMore();
+                            break;
                     }
                 }
             };
@@ -974,6 +977,12 @@ Miniflux.Nav = (function() {
             document.getElementById("search-form").removeAttribute("class");
             document.getElementById("form-text").focus();
         },
+        ToggleMenuMore: function () {
+            var menu = document.getElementById("menu-more");
+            menu.hasAttribute("class")
+                ? menu.removeAttribute("class")
+                : menu.setAttribute("class", "hide");
+        },
         IsListing: isListing
     };
 

assets/js/event.js

@@ -85,6 +85,9 @@ Miniflux.Event = (function() {
                         case 'show-search':
                             Miniflux.Nav.ShowSearch();
                             break;
+                       case 'toggle-menu-more':
+                            Miniflux.Nav.ToggleMenuMore();
+                            break;
                     }
                 }
             };

assets/js/nav.js

@@ -112,6 +112,12 @@ Miniflux.Nav = (function() {
             document.getElementById("search-form").removeAttribute("class");
             document.getElementById("form-text").focus();
         },
+        ToggleMenuMore: function () {
+            var menu = document.getElementById("menu-more");
+            menu.hasAttribute("class")
+                ? menu.removeAttribute("class")
+                : menu.setAttribute("class", "hide");
+        },
         IsListing: isListing
     };