feat(front): admin menu in sidebar

front/src/ui/components/Sidebar.vue

@@ -9,6 +9,8 @@ import Logo from '~/components/Logo.vue'
 import Input from '~/components/ui/Input.vue'
 import Link from '~/components/ui/Link.vue'
 import UserMenu from './UserMenu.vue'
+import Popover from '~/components/ui/Popover.vue'
+import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -30,6 +32,8 @@ const { value: searchParameter } = useModal('search')
 const store = useStore()
 const uploads = useUploadsStore()
 const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
+
+const isOpen = ref(false)
 </script>
 
 <template>
@@ -63,14 +67,75 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
         flex
         style="align-items: center;"
       >
-        <Link
+        <Popover
-          v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
+          v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
-          to="/manage/settings"
+          v-model="isOpen"
-          round
+          raised
-          square-small
+        >
-          icon="bi-wrench"
+          <Button
-          ghost
+            v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
-        />
+            round
+            square-small
+            ghost
+            icon="bi-wrench"
+            :aria-pressed="isOpen ? true : undefined"
+            @click="isOpen = !isOpen"
+          >
+            <div
+              v-if="moderationNotifications > 0"
+              :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
+            >
+              {{ moderationNotifications }}
+            </div>
+          </Button>
+          <template #items>
+            <PopoverItem
+              v-if="store.state.auth.availablePermissions['library']"
+              :to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
+              icon="bi-music-note-beamed"
+            >
+              {{ $t('components.Sidebar.link.library') }}
+              <div
+                v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
+                :title="labels.pendingReviewEdits"
+                :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
+              >
+                {{ $store.state.ui.notifications.pendingReviewEdits }}
+              </div>
+            </PopoverItem>
+
+            <PopoverItem
+              v-if="$store.state.auth.availablePermissions['moderation']"
+              :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
+              icon="bi-megaphone-fill"
+            >
+              {{ $t('components.Sidebar.link.moderation') }}
+              <div
+                v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
+                :title="labels.pendingReviewReports"
+                :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
+              >
+                {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
+              </div>
+            </PopoverItem>
+
+            <PopoverItem
+              v-if="$store.state.auth.availablePermissions['settings']"
+              :to="{name: 'manage.users.users.list'}"
+              icon="bi-people-fill"
+            >
+              {{ $t('components.Sidebar.link.users') }}
+            </PopoverItem>
+
+            <PopoverItem
+              v-if="$store.state.auth.availablePermissions['settings']"
+              :to="{path: '/manage/settings'}"
+              icon="bi-wrench"
+            >
+              {{ $t('components.Sidebar.link.settings') }}
+            </PopoverItem>
+          </template>
+        </Popover>
 
         <Link
           v-if="store.state.auth.authenticated"