edit mode

src/boot/routes.js

@@ -80,7 +80,7 @@ export default (store) => {
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true }), beforeEnter: validateAuthenticatedRoute }
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/nav_panel/nav_panel.js

@@ -4,6 +4,7 @@ import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
 import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -34,16 +35,18 @@ library.add(
   faList
 )
 const NavPanel = {
-  props: ['forceExpand'],
+  props: ['forceExpand', 'forceEditMode'],
   created () {
   },
   components: {
     ListsMenuContent,
     NavigationEntry,
-    NavigationPins
+    NavigationPins,
+    Checkbox
   },
   data () {
     return {
+      editMode: false,
       showTimelines: false,
       showLists: false,
       timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
@@ -57,6 +60,9 @@ const NavPanel = {
     toggleLists () {
       this.showLists = !this.showLists
     },
+    toggleEditMode () {
+      this.editMode = !this.editMode
+    },
     toggleCollapse () {
       this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
       this.$store.dispatch('pushServerSideStorage')

src/components/nav_panel/nav_panel.vue

@@ -46,7 +46,7 @@
               <NavigationEntry
                 v-for="item in timelinesItems"
                 :key="item.name"
-                :show-pin="true"
+                :show-pin="editMode"
                 :item="item"
               />
             </ul>
@@ -83,7 +83,7 @@
             class="timelines-background"
           >
             <ListsMenuContent
-              :show-pin="true"
+              :show-pin="editMode"
               class="timelines"
             />
           </div>
@@ -91,9 +91,17 @@
         <NavigationEntry
           v-for="item in rootItems"
           :key="item.name"
-          :show-pin="true"
+          :show-pin="editMode || forceEditMode"
           :item="item"
         />
+        <div
+          v-if="!forceEditMode"
+          class="panel-footer"
+        >
+          <Checkbox v-model="editMode">
+            {{ $t('nav.edit_pinned') }}
+          </Checkbox>
+        </div>
       </ul>
     </div>
   </div>

src/i18n/en.json

@@ -150,7 +150,8 @@
     "timelines": "Timelines",
     "chats": "Chats",
     "lists": "Lists",
-    "edit_nav_mobile": "Customize navigation bar"
+    "edit_nav_mobile": "Customize navigation bar",
+    "edit_pinned": "Edit pinned items"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",