let mobile users customize top bar as well

src/boot/routes.js

@@ -23,6 +23,7 @@ import RemoteUserResolver from 'components/remote_user_resolver/remote_user_reso
 import Lists from 'components/lists/lists.vue'
 import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -78,7 +79,8 @@ export default (store) => {
     { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
-    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit }
+    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true }), beforeEnter: validateAuthenticatedRoute }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/nav_panel/nav_panel.js

@@ -34,6 +34,7 @@ library.add(
   faList
 )
 const NavPanel = {
+  props: ['forceExpand'],
   created () {
     if (this.currentUser && this.currentUser.locked) {
       this.$store.dispatch('startFetchingFollowRequests')

src/components/nav_panel/nav_panel.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="NavPanel">
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div
+        v-if="!forceExpand"
+        class="panel-heading"
+      >
         <NavigationPins />
         <div class="spacer"/>
         <button
@@ -15,7 +18,7 @@
           />
         </button>
       </div>
-      <ul class="panel-body" v-if="!collapsed">
+      <ul class="panel-body" v-if="!collapsed || forceExpand">
         <li v-if="currentUser || !privateMode">
           <button
             class="button-unstyled menu-item"

src/components/side_drawer/side_drawer.js

@@ -15,6 +15,7 @@ import {
   faTachometerAlt,
   faCog,
   faInfoCircle,
+  faCompass,
   faList
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -30,6 +31,7 @@ library.add(
   faTachometerAlt,
   faCog,
   faInfoCircle,
+  faCompass,
   faList
 )
 

src/components/side_drawer/side_drawer.vue

@@ -191,6 +191,18 @@
             /> {{ $t("nav.administration") }}
           </a>
         </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'edit-navigation' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="compass"
+            /> {{ $t("nav.edit_nav_mobile") }}
+          </router-link>
+        </li>
         <li
           v-if="currentUser"
           @click="toggleDrawer"

src/i18n/en.json

@@ -149,7 +149,8 @@
     "preferences": "Preferences",
     "timelines": "Timelines",
     "chats": "Chats",
-    "lists": "Lists"
+    "lists": "Lists",
+    "edit_nav_mobile": "Customize navigation bar"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",