docs(PinnedItems): sort pinned items before save

packages/docs/src/components/app/drawer/Drawer.vue

@@ -56,7 +56,9 @@
   const opened = computed({
     get: () => rail.value ? [] : _opened.value,
     set: val => {
-      _opened.value = pins.isPinning ? [] : val
+      if (pins.isPinning) return
+
+      _opened.value = val
     },
   })
   const railEnabled = computed(() => user.railDrawer)

packages/docs/src/components/app/drawer/PinnedItems.vue

@@ -1,6 +1,7 @@
 <template>
   <app-list
     v-if="auth.isSubscriber && user.pins"
+    v-model:opened="opened"
     :items="pinned"
     class="pb-0 mb-n2"
     nav
@@ -36,7 +37,7 @@
   import { useRouter } from 'vue-router'
 
   // Utilities
-  import { computed, onBeforeMount } from 'vue'
+  import { computed, onBeforeMount, ref, watch, nextTick } from 'vue'
 
   // Stores
   import { useAuthStore, useUserStore } from '@vuetify/one'
@@ -47,6 +48,7 @@
   const user = useUserStore()
   const router = useRouter()
 
+  const opened = ref([])
   const pinned = computed(() => ([{
     activeIcon: 'mdi-pin',
     inactiveIcon: 'mdi-pin-outline',
@@ -69,4 +71,10 @@
   onBeforeMount(() => {
     pins.load()
   })
+
+  watch(() => pins.pins, (val, oldVal) => {
+    if (val.length < oldVal.length) return
+
+    opened.value = ['Pinned']
+  })
 </script>

packages/docs/src/store/pins.ts

@@ -5,7 +5,7 @@ import { defineStore } from 'pinia'
 import { useRoute } from 'vue-router'
 
 // Utilities
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 
 // Stores
 import { useUserStore } from '@vuetify/one'
@@ -25,15 +25,23 @@ export const usePinsStore = defineStore('pins', () => {
 
   const pageIsPinned = computed(() => pins.value.some(p => p.to === route.path))
 
-  watch(isPinning, save)
-
   function toggle (value: boolean, pin: Pin) {
+    let array = pins.value.slice()
+
     if (value) {
-      pins.value.push(pin)
+      array.push(pin)
     } else {
-      pins.value = pins.value.filter(p => p.to !== pin.to)
+      array = array.filter(p => p.to !== pin.to)
     }
 
+    array.sort((a, b) => {
+      if (a.title > b.title) return 1
+      if (a.title < b.title) return -1
+      return 0
+    })
+
+    pins.value = array
+
     save()
   }