feat: space menu button report (snapshot-labs#3826)

* wip * feat: menu button for space * fix: tally actual link * fix: menu btn position
septa6377 · Apr 28, 2023 · ad9cb60 · ad9cb60
1 parent 5de90d5
commit ad9cb60
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/src/components/SpaceSidebar.vue b/src/components/SpaceSidebar.vue
@@ -3,16 +3,52 @@ import { ExtendedSpace } from '@/helpers/interfaces';
 import SpaceSidebarSubspaces from './SpaceSidebarSubspaces.vue';
 
 defineProps<{ space: ExtendedSpace }>();
+
+const { t } = useI18n();
+
+const threeDotItems = computed(() => {
+  const items = [{ text: t('report'), action: 'report' }];
+  return items;
+});
+
+function handleSelect(e) {
+  if (e === 'report') window.open('https://tally.so/r/mKzXo7', '_blank');
+}
 </script>
 
 <template>
   <div class="mb-4 lg:fixed lg:mb-0 lg:w-[240px]">
     <BaseBlock slim class="overflow-hidden">
-      <div class="lg:max-h-[calc(100vh-120px)] lg:overflow-y-auto">
+      <div class="relative lg:max-h-[calc(100vh-120px)] lg:overflow-y-auto">
         <SpaceSidebarHeader :space="space" />
         <SpaceSidebarNavigation :space="space" class="lg:mt-0" />
         <SpaceSidebarSubspaces :space="space" class="hidden lg:flex" />
         <SpaceSidebarFooter :space="space" class="hidden lg:flex" />
+        <div
+          class="absolute right-[20px] top-2 md:bottom-2 md:top-auto lg:bottom-auto lg:right-2 lg:top-2"
+        >
+          <BaseMenu
+            class="md:ml-2"
+            :items="threeDotItems"
+            @select="handleSelect"
+          >
+            <template #button>
+              <div>
+                <BaseButtonIcon :loading="false">
+                  <i-ho-dots-horizontal />
+                </BaseButtonIcon>
+              </div>
+            </template>
+            <template #item="{ item }">
+              <div class="flex items-center gap-2">
+                <i-ho-document-duplicate v-if="item.action === 'duplicate'" />
+                <i-ho-flag v-if="item.action === 'report'" />
+                <i-ho-trash v-if="item.action === 'delete'" />
+                {{ item.text }}
+              </div>
+            </template>
+          </BaseMenu>
+        </div>
       </div>
     </BaseBlock>
   </div>

diff --git a/src/components/SpaceSidebarHeader.vue b/src/components/SpaceSidebarHeader.vue
@@ -31,7 +31,9 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="block px-4 pt-4 text-center md:flex lg:block lg:px-0 lg:pt-0">
+  <div
+    class="relative block px-4 pt-4 text-center md:flex lg:block lg:px-0 lg:pt-0"
+  >
     <div class="flex lg:block">
       <AvatarSpace
         :space="space"