hide drawer menu when click away

src/components/AppNav.vue

@@ -1,7 +1,13 @@
 <script setup>
 import { initDrawers, Drawer } from 'flowbite'
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
+import NotificationCentre from './NotificationCentre.vue'
+import { useEventsStore } from '@/stores/events'
+import { storeToRefs } from 'pinia'
+
+const eventsStore = useEventsStore()
+const { events } = storeToRefs(eventsStore)
 
 let drawer
 onMounted(() => {
@@ -61,6 +67,15 @@ onMounted(() => {
       localStorage.setItem('color-theme', 'dark')
     }
   })
+  document.documentElement.addEventListener('click', hideDrawer)
+})
+function hideDrawer() {
+  if (drawer.isVisible) {
+    drawer.hide()
+  }
+}
+onUnmounted(() => {
+  document.documentElement.removeEventListener('click', hideDrawer)
 })
 </script>
 
@@ -74,41 +89,36 @@ onMounted(() => {
       >
     </RouterLink>
     <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-      <button
-        type="button"
-        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-        @click="drawer.toggle()"
-      >
-        <span class="sr-only">Open main menu</span>
-        <svg
-          class="w-5 h-5"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 17 14"
+      <div class="inline-flex items-center">
+        <NotificationCentre
+          class="mr-1"
+          v-model="events"
+          @clear-events="eventsStore.clearEvents"
+          @clear-event="eventsStore.clearEvent"
+        ></NotificationCentre>
+        <button
+          type="button"
+          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          @click.stop="drawer.toggle()"
         >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M1 1h15M1 7h15M1 13h15"
-          />
-        </svg>
-      </button>
-    </div>
-    <div class="items-center justify-between hidden w-full" id="navbar-sticky">
-      <ul
-        class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
-      >
-        <li>
-          <RouterLink
-            class="router-link block py-2 px-3 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
-            to="/moderate"
-            >Moderate</RouterLink
+          <span class="sr-only">Open main menu</span>
+          <svg
+            class="w-5 h-5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 17 14"
           >
-        </li>
-      </ul>
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 1h15M1 7h15M1 13h15"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
 
     <!-- drawer component -->

src/components/CodexImage.vue

@@ -32,10 +32,24 @@ const props = defineProps({
     default() {
       return 120000
     }
+  },
+  blurClass: {
+    type: String,
+    default() {
+      return 'blur-xxl'
+    },
+    validator(value, props) {
+      return ['blur', 'blur-xxl'].includes(value)
+    }
   }
 })
 const hidden = computed(() => props.cid === undefined)
 const blurred = computed(() => ['pending', 'banned'].includes(props.moderated))
+const imageClassObj = computed(() => {
+  let obj = {}
+  obj[props.blurClass] = blurred.value
+  return obj
+})
 
 const controller = new AbortController()
 
@@ -120,7 +134,7 @@ onUnmounted(() => {
       :src="imgSrc"
       class="rounded-lg"
       :alt="props.alt"
-      :class="{ 'blur-xxl': blurred }"
+      :class="imageClassObj"
     />
   </div>
 </template>

src/components/StorageRequests.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { initTooltips } from 'flowbite'
 import { storeToRefs } from 'pinia'
@@ -7,6 +7,7 @@ import { useRequestsStore } from '@/stores/requests'
 import StateIndicator from '@/components/StateIndicator.vue'
 import RelativeTime from '@/components/RelativeTime.vue'
 import ShortenValue from '@/components/ShortenValue.vue'
+import CodexImage from '@/components/CodexImage.vue'
 import { getStateColour, moderatedState } from '@/utils/requests'
 
 const requestsStore = useRequestsStore()
@@ -19,6 +20,13 @@ const requestsOrdered = computed(() => {
   return sorted
 })
 
+watch(
+  () => requests,
+  (reqs) => {
+    console.log('requests changed!')
+  }
+)
+
 defineProps({
   enableModeration: {
     type: Boolean,
@@ -159,6 +167,12 @@ onMounted(() => {
               scope="row"
               class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
             >
+              <CodexImage
+                :cid="request.content.cid"
+                :moderated="moderated"
+                class="w-10 h-10 rounded-full mt-1"
+                blurClass="blur"
+              />
               <div class="ps-3">
                 <div class="text-base font-semibold">
                   <ShortenValue :value="requestId"></ShortenValue>