docs(AppDrawerAppend): add rail toggle for subscribers

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

@@ -1,10 +1,26 @@
 <template>
  <v-divider />
 
- <git-hub-login />
+ <v-hover>
+ <template #default="{ props: hoverProps, isHovering }">
+ <div v-bind="hoverProps">
+ <v-expand-transition v-if="auth.isSubscriber">
+ <drawer-toggle-rail v-if="isHovering" />
+ </v-expand-transition>
+
+ <git-hub-login />
+ </div>
+ </template>
+ </v-hover>
 </template>
 
 <script setup>
  // Components
+ import DrawerToggleRail from '@/components/app/drawer/DrawerToggleRail.vue'
  import GitHubLogin from '@/components/app/GitHubLogin.vue'
+
+ // Stores
+ import { useAuthStore } from '@/store/auth'
+
+ const auth = useAuthStore()
 </script>

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

@@ -0,0 +1,26 @@
+<template>
+ <div>
+ <v-list-item
+ :prepend-icon="icon"
+ @click="onClick"
+ />
+ </div>
+</template>
+
+<script setup>
+ // Stores
+ import { useUserStore } from '@/store/user'
+
+ // Utilities
+ import { computed } from 'vue'
+
+ const user = useUserStore()
+
+ const icon = computed(() => {
+ return user.railDrawer ? 'mdi-chevron-double-right' : 'mdi-chevron-double-left'
+ })
+
+ function onClick () {
+ user.railDrawer = !user.railDrawer
+ }
+</script>

packages/docs/src/plugins/icons.ts

@@ -73,6 +73,8 @@ export {
  mdiCheckboxBlankOutline,
  mdiCheckboxMarked,
  mdiCheckboxMarkedCircle,
+ mdiChevronDoubleLeft,
+ mdiChevronDoubleRight,
  mdiChevronDown,
  mdiChevronLeft,
  mdiChevronRight,