From 6329a906a6e8ecebb95e86f7bdcc4ddadb9c5a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Wed, 23 Nov 2022 22:50:03 +0800
Subject: [PATCH] refactor: improve nav side UI

---
 components/nav/NavSide.vue | 47 ++++++++++++++++++++++++++++++--------
 layouts/default.vue        |  2 +-
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 536407d4..49206e0c 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -2,43 +2,70 @@
 </script>
 
 <template>
-  <div px6 py2 flex="~ col gap6" text-lg>
+  <div px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
-      <NuxtLink flex gap2 items-center transition-100 to="/home" active-class="text-primary">
+      <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>
-      <NuxtLink flex gap2 items-center transition-100 to="/notifications" active-class="text-primary">
+      <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>
     </template>
-    <NuxtLink flex gap2 items-center transition-100 to="/explore" active-class="text-primary">
+    <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>
-    <NuxtLink flex gap2 items-center transition-100 to="/public/local" active-class="text-primary">
+    <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>
-    <NuxtLink flex gap2 items-center transition-100 to="/public" active-class="text-primary">
+    <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>
     <template v-if="currentUser">
-      <NuxtLink flex gap2 items-center transition-100 to="/conversations" active-class="text-primary">
+      <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>
-      <NuxtLink flex gap2 items-center transition-100 to="/favourites" active-class="text-primary">
+      <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>
-      <NuxtLink flex gap2 items-center transition-100 to="/bookmarks" active-class="text-primary">
+      <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>
-      <NuxtLink flex gap2 items-center transition-100 :to="`/@${currentUser.account?.username}`" active-class="text-primary">
+      <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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2b741f86..931eb352 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -27,7 +27,7 @@
         <div sticky top-0 h-screen flex="~ col">
           <slot name="right">
             <NavTitle p5 />
-            <NavSide border="y base" py8 />
+            <NavSide border="y base" />
             <div flex-auto />
             <NavFooter />
           </slot>