From 0e1382153eea0080c38371bac7315388c71ece36 Mon Sep 17 00:00:00 2001
From: limes <git@limes.pink>
Date: Sun, 16 Aug 2026 17:09:58 +0200
Subject: [PATCH] fix: bandwidth not closing on outside click

---
 README.md                        |  2 +-
 src/components/Footer/Footer.vue | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6e8b9f7..44cbcc3 100644
--- a/README.md
+++ b/README.md
@@ -124,7 +124,7 @@ Testing findings:
 - [X] progress total percentage not rounded properly
 - [X] faq open first by default
 - [X] fix github icon size on team
-- [ ] click out of bandwidth doesn't close bandwidth (use vueuse onclickoutside)
+- [X] click out of bandwidth doesn't close bandwidth (use vueuse onclickoutside)
 - [ ] fix hover and clickaway on navbar
 - [ ] fix locale list not having the same layout, no clickaway
 - [ ] progress is a wrench?
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index 8943ef5..3fafa1f 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core';
 const { tm, t } = useI18n();
 const year = new Date().getFullYear();
 
@@ -6,12 +7,17 @@ const bandwidthQuoteIndex = ref<number>(-1);
 const quotes = computed(() => tm<string>('footer.bandwidthRaccoonQuotes') as string[]);
 const totalBandwidthQuotes = computed(() => quotes.value.length);
 const currentQuote = computed(() => t(`footer.bandwidthRaccoonQuotes[${Math.max(0, bandwidthQuoteIndex.value)}]`));
+const bandwidthOpen = ref<boolean>(false);
+
+const bandwidthRef = ref(null);
+onClickOutside(bandwidthRef, () => bandwidthOpen.value = false);
 
 watch([totalBandwidthQuotes], () => {
 	bandwidthQuoteIndex.value = -1;
 });
 
 function bandwidthClickHandler() {
+	bandwidthOpen.value = true;
 	if (bandwidthQuoteIndex.value + 1 >= totalBandwidthQuotes.value) {
 		bandwidthQuoteIndex.value = 0;
 	} else {
@@ -146,7 +152,10 @@ function bandwidthClickHandler() {
           {{ $t("footer.widget.button") }}
         </a>
       </div>
-      <div :class="{ 'bandwidth-raccoon-wrapper': true, 'speak': bandwidthQuoteIndex !== -1 }">
+      <div
+        ref="bandwidthRef"
+        :class="{ 'bandwidth-raccoon-wrapper': true, 'speak': bandwidthOpen }"
+      >
         <div class="text-bubble">
           <p>{{ currentQuote }}</p>
         </div>