stash

frontend/src/components/Messages.vue

@@ -1,12 +1,11 @@
 <template>
     <li class="nav-item dropdown">
-        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
+        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" @click.prevent="toggleDropdown">
             <div class="position-relative">
                 <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
             </div>
         </a>
-        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
+        <div :class="['dropdown-menu','dropdown-menu-right', 'dropdown-menu-lg','py-0', {'show': show_dropdown}]">
-             aria-labelledby="messagesDropdown">
             <div class="dropdown-menu-header">
                 <div class="position-relative">
                     4 New Messages
@@ -95,10 +94,20 @@ export default {
             default: () => []
         }
     },
+    data() {
+        return {
+            show_dropdown: false
+        }
+    },
     computed: {
         top_messages() {
             return this.messages.slice(0, 4);
         }
+    },
+    methods: {
+        toggleDropdown() {
+            this.show_dropdown = !this.show_dropdown;
+        }
     }
 }
 </script>

frontend/src/components/Notifications.vue

@@ -1,15 +1,14 @@
 <template>
     <li class="nav-item dropdown">
-        <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
+        <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" @click.prevent="toggleDropdown">
             <div class="position-relative">
                 <b-icon-bell class="bi-valign-middle"></b-icon-bell>
                 <span :class="['indicator', notificationsColor(top_notifications)]">{{
-                    top_notifications.length
+                        top_notifications.length
                     }}</span>
             </div>
         </a>
-        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
+        <div :class="['dropdown-menu','dropdown-menu-right', 'dropdown-menu-lg','py-0', {'show': show_dropdown}]">
-             aria-labelledby="alertsDropdown">
             <div class="dropdown-menu-header">
                 {{ top_notifications.length }} New Notifications
             </div>
@@ -61,6 +60,11 @@ export default {
             default: () => []
         }
     },
+    data() {
+        return {
+            show_dropdown: false
+        }
+    },
     computed: {
         top_notifications() {
             return this.notifications.sort((a, b) => {
@@ -84,6 +88,9 @@ export default {
                 return 'bg-warning';
             }
             return 'bg-primary';
+        },
+        toggleDropdown() {
+            this.show_dropdown = !this.show_dropdown
         }
     },
     async mounted() {

frontend/src/components/UserDropdown.vue

@@ -7,7 +7,7 @@
         </a>
 
         <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
-           data-toggle="dropdown">
+           @click.prevent="toggleDropdown">
             <img src="/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
                  alt="Charles Hall"/>
             <span class="text-dark">
@@ -15,7 +15,7 @@
                     </span>
         </a>
 
-        <div class="dropdown-menu dropdown-menu-right">
+        <div :class="['dropdown-menu','dropdown-menu-right', {'show': show_dropdown}]">
             <router-link to="/profile" class="dropdown-item">
                 <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
                 Profile
@@ -40,8 +40,16 @@ export default {
     components: {
         ...BIcons
     },
+    data() {
+        return {
+            show_dropdown: false
+        }
+    },
     methods: {
-        ...mapMutations(['logout'])
+        ...mapMutations(['logout']),
+        toggleDropdown() {
+            this.show_dropdown = !this.show_dropdown
+        }
     },
     computed: {
         username() {

frontend/src/store.js

@@ -143,18 +143,18 @@ export default createStore({
             commit('setHomeServers', promise)
             return promise
         },
-        async getAllFriendsServers({state, dispatch, commit}) {
+        async getAllKnownServers({state, dispatch, commit}) {
             const friends = await dispatch('fetchFriends')
             if (state.all_friends_servers)
                 return state.all_friends_servers
             const promise = (async () => {
                 const servers = new ServerSetUnion([])
+                const home = await dispatch('getHomeServers')
+                servers.add(home)
                 for (const friend of friends) {
                     const s = await dispatch('lookupServer', {username: friend.username})
                     servers.add(new ServerSet(s, state.unreachable_neighbors))
                 }
-                const home = await dispatch('getHomeServers')
-                servers.add(home)
                 return servers
             })()
             commit('setAllFriendsServers', promise)
@@ -170,7 +170,7 @@ export default createStore({
             return items
         },
         async searchInventories({state, dispatch, getters}, {query}) {
-            const servers = await dispatch('getAllFriendsServers')
+            const servers = await dispatch('getAllKnownServers')
             return await servers.get(getters.signAuth, '/api/inventory/search/?q=' + query)
         },
         async createInventoryItem({state, dispatch, getters}, item) {
@@ -190,7 +190,7 @@ export default createStore({
             return ret
         },
         async fetchSearchResults({state, dispatch, getters}, {query}) {
-            const servers = await dispatch('getAllFriendsServers')
+            const servers = await dispatch('getAllKnownServers')
             return await servers.get(getters.signAuth, '/api/search/?query=' + query)
         },
         async fetchFriends({commit, dispatch, getters, state}) {