From 6058d13b3012a0d1a3dc9f1e4850f01bdf88efd1 Mon Sep 17 00:00:00 2001
From: Youssouf EL Azizi <youssoufelazizi@gmail.com>
Date: Tue, 31 Dec 2024 22:45:02 +0100
Subject: [PATCH] refactor: table of content ui

---
 src/components/blog/table-of-contents.astro | 29 ++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/blog/table-of-contents.astro b/src/components/blog/table-of-contents.astro
index b1df0130..bf3ff1e9 100644
--- a/src/components/blog/table-of-contents.astro
+++ b/src/components/blog/table-of-contents.astro
@@ -12,16 +12,20 @@ const h2Headings = headings.filter(heading => heading.depth === 2);
 ---
 
 <aside class="absolute left-full top-0 ml-8 hidden h-full lg:block">
-  <nav class="sticky top-12 w-64" aria-label="Table of contents">
-    <div class="rounded-lg bg-white/50 p-4 shadow-sm">
-      <h2 class="mb-4 text-sm font-semibold text-gray-900">On this page</h2>
-      <ul class="space-y-2 text-sm">
+  <nav class="sticky top-12 w-72" aria-label="Table of contents">
+    <div
+      class="rounded-xl border border-gray-100 bg-white/80 p-5 shadow-sm backdrop-blur-sm"
+    >
+      <h2 class="mb-4 font-sans text-sm font-semibold text-gray-900">
+        On this page
+      </h2>
+      <ul class="space-y-2 text-[13px]">
         {
           h2Headings.map(heading => (
-            <li class="hover:text-primary font-sans text-sm font-medium">
+            <li class="group">
               <a
                 href={`#${heading.slug}`}
-                class="hover:text-primary block text-gray-500"
+                class="hover:text-primary flex items-center font-medium text-gray-500 transition-all"
               >
                 {heading.text}
               </a>
@@ -38,4 +42,17 @@ const h2Headings = headings.filter(heading => heading.depth === 2);
     max-height: calc(100vh - 8rem);
     overflow-y: auto;
   }
+
+  nav::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  nav::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  nav::-webkit-scrollbar-thumb {
+    background-color: #e5e7eb;
+    border-radius: 20px;
+  }
 </style>