From cd4658506d9dda42492316df2828df33ff7a94d5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 10:35:26 +0800
Subject: [PATCH] refactor: NavSideItem

---
 components/account/AccountAvatar.vue      | 12 ++--
 components/account/AccountAvatarImage.vue | 17 ------
 components/nav/NavSide.vue                | 68 ++++-------------------
 components/nav/NavSideItem.vue            | 18 ++++++
 4 files changed, 37 insertions(+), 78 deletions(-)
 delete mode 100644 components/account/AccountAvatarImage.vue
 create mode 100644 components/nav/NavSideItem.vue

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index 8b9f576a..a295e984 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -4,12 +4,14 @@ import type { Account } from 'masto'
 defineProps<{
   account: Account
 }>()
-
-defineOptions({
-  inheritAttrs: false,
-})
 </script>
 
 <template>
-  <AccountAvatarImage :account="account" v-bind="$attrs" />
+  <img
+    :src="account.avatar"
+    :alt="account.username"
+    loading="lazy"
+    rounded-full bg-gray:10
+    v-bind="$attrs"
+  >
 </template>
diff --git a/components/account/AccountAvatarImage.vue b/components/account/AccountAvatarImage.vue
deleted file mode 100644
index a295e984..00000000
--- a/components/account/AccountAvatarImage.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { Account } from 'masto'
-
-defineProps<{
-  account: Account
-}>()
-</script>
-
-<template>
-  <img
-    :src="account.avatar"
-    :alt="account.username"
-    loading="lazy"
-    rounded-full bg-gray:10
-    v-bind="$attrs"
-  >
-</template>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 919fdb69..86c76376 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -1,65 +1,21 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <div px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
-      <NuxtLink to="/home" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-          <div i-ri:home-5-line />
-          <span>Home</span>
-        </div>
-      </NuxtLink>
-      <NuxtLink to="/notifications" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-          <div i-ri:notification-4-line />
-          <span>Notifications</span>
-        </div>
-      </NuxtLink>
+      <NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" />
+      <NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" />
     </template>
-    <NuxtLink to="/explore" active-class="text-primary" group focus:outline-none>
-      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-        <div i-ri:hashtag />
-        <span>Explore</span>
-      </div>
-    </NuxtLink>
-    <NuxtLink to="/public/local" active-class="text-primary" group focus:outline-none>
-      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-        <div i-ri:group-2-line />
-        <span>Local</span>
-      </div>
-    </NuxtLink>
-    <NuxtLink to="/public" active-class="text-primary" group focus:outline-none>
-      <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-        <div i-ri:earth-line />
-        <span>Federated</span>
-      </div>
-    </NuxtLink>
+    <NavSideItem text="Explore" to="/explore" icon="i-ri:hashtag" />
+    <NavSideItem text="Local" to="/public/local" icon="i-ri:group-2-line " />
+    <NavSideItem text="Federated" to="/public" icon="i-ri:earth-line" />
     <template v-if="currentUser">
-      <NuxtLink to="/conversations" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-          <div i-ri:at-line />
-          <span>Conversations</span>
-        </div>
-      </NuxtLink>
-      <NuxtLink to="/favourites" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-          <div i-ri:heart-3-line />
-          <span>Favorites</span>
-        </div>
-      </NuxtLink>
-      <NuxtLink to="/bookmarks" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
-          <div i-ri:bookmark-line />
-          <span>Bookmarks</span>
-        </div>
-      </NuxtLink>
-      <NuxtLink :to="getAccountPath(currentUser.account)" active-class="text-primary" group focus:outline-none>
-        <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
+      <NavSideItem text="Conversations" to="/conversations" icon="i-ri:at-line" />
+      <NavSideItem text="Favourites" to="/favourites" icon="i-ri:heart-3-line" />
+      <NavSideItem text="Bookmarks" to="/bookmarks" icon="i-ri:bookmark-line " />
+      <NavSideItem text="Lists" :to="getAccountPath(currentUser.account)" icon="i-ri:list-check-2-line">
+        <template #icon>
           <AccountAvatar :account="currentUser.account" h="1.2em" />
-          <span>Profile</span>
-        </div>
-      </NuxtLink>
+        </template>
+      </NavSideItem>
     </template>
   </div>
 </template>
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
new file mode 100644
index 00000000..8b0a63bd
--- /dev/null
+++ b/components/nav/NavSideItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+  icon: string
+  to: string
+}>()
+</script>
+
+<template>
+  <NuxtLink :to="to" active-class="text-primary" group focus:outline-none>
+    <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current">
+      <slot name="icon">
+        <div :class="icon" />
+      </slot>
+      <span>{{ text }}</span>
+    </div>
+  </NuxtLink>
+</template>