From 4e784442e32d7df6c6dcafb6159b59623d9dfb93 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 2 Mar 2025 10:00:34 -0500
Subject: [PATCH] turn isotipo into a button for nav

---
 .../components/common/Navigation/HomeBtn.vue  | 10 +--------
 frontend/src/components/common/RIsotipo.vue   | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index a4242cde5..c8e138494 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import RIsotipo from "@/components/common/RIsotipo.vue";
-import storeNavigation from "@/stores/navigation";
 import { ROUTES } from "@/plugins/router";
-
-const navigationStore = storeNavigation();
 </script>
 <template>
-  <r-isotipo
-    :to="{ name: ROUTES.HOME }"
-    @click="navigationStore.goHome"
-    class="cursor-pointer"
-    :size="40"
-  />
+  <r-isotipo :to="{ name: ROUTES.HOME }" class="cursor-pointer" :size="40" />
 </template>
 
 <style scoped>
diff --git a/frontend/src/components/common/RIsotipo.vue b/frontend/src/components/common/RIsotipo.vue
index c70c38575..2c818360d 100644
--- a/frontend/src/components/common/RIsotipo.vue
+++ b/frontend/src/components/common/RIsotipo.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import type { RouteLocationRaw } from "vue-router";
 
-withDefaults(defineProps<{ size?: number }>(), { size: 40 });
+withDefaults(defineProps<{ size?: number; to?: RouteLocationRaw }>(), {
+  size: 40,
+});
 
 const logos = {
   xbox: { path: "romm_logo_xbox_one_circle.svg", weight: 0.945 },
@@ -26,7 +29,17 @@ const randomLogo = ref<string>(getRandomLogo());
 </script>
 
 <template>
-  <v-avatar :size="size">
-    <img :src="`/assets/logos/${randomLogo}`" alt="Romm Logo" :width="size" />
-  </v-avatar>
+  <v-btn
+    :to="to"
+    icon
+    variant="flat"
+    color="background"
+    class="rounded-50"
+    :height="size"
+    :width="size"
+  >
+    <v-avatar :size="size">
+      <img :src="`/assets/logos/${randomLogo}`" alt="Romm Logo" :width="size" />
+    </v-avatar>
+  </v-btn>
 </template>