From f6bd3aea4a728cc5629b5714ec92230cd109fb16 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Wed, 6 Sep 2023 00:25:05 +0600
Subject: [PATCH] Toc component design fix

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/blog/Toc.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/blog/Toc.vue b/components/blog/Toc.vue
index 0e56410..fe4bc01 100644
--- a/components/blog/Toc.vue
+++ b/components/blog/Toc.vue
@@ -6,12 +6,17 @@ const links = articles.body.toc.links
 </script>
 
 <template>
-  <div class="lg:col-span-3 sticky top-28 h-96  p-2 hidden lg:block  justify-self-end">
-    <h1 class="text-lg font-bold mb-4">
-      Table Of Content
-    </h1>
-    <NuxtLink v-for="link in links" :key="link.id" :to="`#${link.id}`" class="block text-md mb-3">
-      {{ link.text }}
-    </NuxtLink>
+  <div class="lg:col-span-3 sticky top-28 h-96  hidden lg:block  justify-self-end">
+    <div class="border p-3 rounded-md min-w-[200px]">
+      <h1 class="text-sm font-bold mb-3 border-b pb-2">
+        Table Of Content
+      </h1>
+      <NuxtLink
+        v-for="link in links" :key="link.id" :to="`#${link.id}`"
+        class="block text-xs mb-3 hover:underline"
+      >
+        {{ link.text }}
+      </NuxtLink>
+    </div>
   </div>
 </template>