From 6bf39d3a4fbee2cd2881bee599a4cf7de1a1836b Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Thu, 24 Nov 2022 09:06:14 -0500
Subject: [PATCH] fix: full width nav hover (#46)

---
 components/nav/NavSide.vue | 99 +++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 54 deletions(-)

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 49206e0c..e1163149 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -4,70 +4,61 @@
 <template>
   <div px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        to="/home" active-class="text-primary"
-      >
-        <div i-ri:home-5-line />
-        <span>Home</span>
+      <NuxtLink to="/home" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+          <div i-ri:home-5-line />
+          <span>Home</span>
+        </div>
       </NuxtLink>
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        to="/notifications" active-class="text-primary"
-      >
-        <div i-ri:notification-4-line />
-        <span>Notifications</span>
+      <NuxtLink to="/notifications" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+          <div i-ri:notification-4-line />
+          <span>Notifications</span>
+        </div>
       </NuxtLink>
     </template>
-    <NuxtLink
-      flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-      to="/explore" active-class="text-primary"
-    >
-      <div i-ri:hashtag />
-      <span>Explore</span>
+    <NuxtLink to="/explore" active-class="text-primary" group>
+      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+        <div i-ri:hashtag />
+        <span>Explore</span>
+      </div>
     </NuxtLink>
-    <NuxtLink
-      flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-      to="/public/local" active-class="text-primary"
-    >
-      <div i-ri:group-2-line />
-      <span>Local</span>
+    <NuxtLink group to="/public/local" active-class="text-primary">
+      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+        <div i-ri:group-2-line />
+        <span>Local</span>
+      </div>
     </NuxtLink>
-    <NuxtLink
-      flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-      to="/public" active-class="text-primary"
-    >
-      <div i-ri:earth-line />
-      <span>Federated</span>
+    <NuxtLink to="/public" active-class="text-primary" group>
+      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+        <div i-ri:earth-line />
+        <span>Federated</span>
+      </div>
     </NuxtLink>
     <template v-if="currentUser">
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        to="/conversations" active-class="text-primary"
-      >
-        <div i-ri:at-line />
-        <span>Conversations</span>
+      <NuxtLink to="/conversations" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+          <div i-ri:at-line />
+          <span>Conversations</span>
+        </div>
       </NuxtLink>
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        to="/favourites" active-class="text-primary"
-      >
-        <div i-ri:heart-3-line />
-        <span>Favorites</span>
+      <NuxtLink to="/favourites" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+          <div i-ri:heart-3-line />
+          <span>Favorites</span>
+        </div>
       </NuxtLink>
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        to="/bookmarks" active-class="text-primary"
-      >
-        <div i-ri:bookmark-line />
-        <span>Bookmarks</span>
+      <NuxtLink to="/bookmarks" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active>
+          <div i-ri:bookmark-line />
+          <span>Bookmarks</span>
+        </div>
       </NuxtLink>
-      <NuxtLink
-        flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active
-        :to="`/@${currentUser.account?.username}`" active-class="text-primary"
-      >
-        <AccountAvatar :account="currentUser.account" h="1.2em" />
-        <span>Profile</span>
+      <NuxtLink :to="`/@${currentUser.account?.username}`" active-class="text-primary" group>
+        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active>
+          <AccountAvatar :account="currentUser.account" h="1.2em" />
+          <span>Profile</span>
+        </div>
       </NuxtLink>
     </template>
   </div>