From c3e7eadddff2357f51b49bb8eb8125777d754a0e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:00:41 +0300
Subject: [PATCH] let mobile users customize top bar as well

---
 src/boot/routes.js                         |  4 +++-
 src/components/nav_panel/nav_panel.js      |  1 +
 src/components/nav_panel/nav_panel.vue     |  7 +++++--
 src/components/side_drawer/side_drawer.js  |  2 ++
 src/components/side_drawer/side_drawer.vue | 12 ++++++++++++
 src/i18n/en.json                           |  3 ++-
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 95e4719999..178bb937a4 100644
--- a/src/boot/routes.js
+++ b/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) {
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index b4e1ec0b9e..0d71a92478 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/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')
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 84b000a4ec..5895473d8f 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/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"
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 913fa69562..cbfd6b7d0e 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/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
 )
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 7d9d36d7c2..5223fdfa1e 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/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"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2e84595973..f042d56211 100644
--- a/src/i18n/en.json
+++ b/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…",