Close sidebar on outside clicks

web/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^0.10.1",
     "@kyvg/vue3-notification": "^2.9.1",
+    "@vueuse/components": "^10.4.0",
     "@vueuse/core": "^9.13.0",
     "ansi_up": "^5.2.1",
     "dayjs": "^1.11.9",

web/src/components/pipeline-feed/PipelineFeedSidebar.vue

@@ -1,6 +1,7 @@
 <template>
   <aside
     v-if="isOpen"
+    v-on-click-outside="close"
     class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
     :aria-label="$t('pipeline_feed')"
   >
@@ -21,9 +22,11 @@
 </template>
 
 <script lang="ts" setup>
+import { vOnClickOutside } from '@vueuse/components';
+
 import PipelineFeedItem from '~/components/pipeline-feed/PipelineFeedItem.vue';
 import usePipelineFeed from '~/compositions/usePipelineFeed';
 
 const pipelineFeed = usePipelineFeed();
-const { isOpen, sortedPipelines } = pipelineFeed;
+const { close, isOpen, sortedPipelines } = pipelineFeed;
 </script>

web/src/compositions/usePipelineFeed.ts

@@ -17,11 +17,16 @@ export default () => {
     setUserConfig('isPipelineFeedOpen', !userConfig.value.isPipelineFeedOpen);
   }
 
+  function close() {
+    setUserConfig('isPipelineFeedOpen', false);
+  }
+
   const sortedPipelines = toRef(pipelineStore, 'pipelineFeed');
   const activePipelines = toRef(pipelineStore, 'activePipelines');
 
   return {
     toggle,
+    close,
     isOpen,
     sortedPipelines,
     activePipelines,