Update account sidebar

src/components/AccountSidebar.astro

@@ -9,21 +9,33 @@ export interface Props {
 }
 
 const sidebarLinks = [
-  {
-    href: '/account',
-    title: 'Activity',
-    id: 'activity',
-  },
-  {
-    href: '/account/update-profile',
-    title: 'Profile',
-    id: 'profile',
-  },
-  {
-    href: '/account/update-password',
-    title: 'Security',
-    id: 'change-password',
-  },
+    {
+        href: '/account',
+        title: 'Activity',
+        id: 'activity',
+        icon: {
+            glyph: 'analytics',
+            classes: 'h-3 w-4',
+        }
+    },
+    {
+        href: '/account/update-profile',
+        title: 'Profile',
+        id: 'profile',
+        icon: {
+            glyph: 'user',
+            classes: 'h-4 w-4',
+        }
+    },
+    { 
+        href: '/account/update-password',
+        title: 'Security',
+        id: 'change-password',
+        icon: {
+            glyph: 'security',
+            classes: 'h-4 w-4'
+        }
+    },
 ];
 ---
 
@@ -58,7 +70,7 @@ const sidebarLinks = [
 
 <div class='container flex min-h-screen items-stretch'>
   <!-- Start Desktop Sidebar -->
-  <aside class='hidden shrink-0 w-48 border-r border-slate-200 py-10 pr-5 md:block'>
+  <aside class='hidden shrink-0 w-44 border-r border-slate-200 py-10 md:block'>
     <nav>
       <ul class='space-y-1'>
         {
@@ -66,10 +78,11 @@ const sidebarLinks = [
             <li>
               <a
                 href={sidebarLink.href}
-                class={`font-regular flex w-full items-center gap-2 rounded px-2 py-1.5 text-slate-900 hover:underline ${
-                  activePageId === sidebarLink.id ? 'bg-slate-100 hover:no-underline' : ''
+                class={`font-regular flex w-full items-center gap-2 px-2 py-1.5 text-sm border-r-2 border-r-transparent ${
+                  activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 hover:border-r-gray-300'
                 }`}
               >
+              <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} />
                 {sidebarLink.title}
               </a>
             </li>

src/icons/analytics.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" focusable="false" fill="currentColor">
+    <path d="M 8 1C 8 0.447693 8.44772 0 9 0C 9.55228 0 10 0.447693 10 1L 10 13C 10 13.5523 9.55228 14 9 14C 8.44772 14 8 13.5523 8 13L 8 1ZM 5 4C 4.44772 4 4 4.44769 4 5L 4 13C 4 13.5523 4.44772 14 5 14C 5.55228 14 6 13.5523 6 13L 6 5C 6 4.44769 5.55228 4 5 4ZM 1 8C 0.447716 8 0 8.44769 0 9L 0 13C 0 13.5523 0.447716 14 1 14C 1.55228 14 2 13.5523 2 13L 2 9C 2 8.44769 1.55228 8 1 8ZM 13 6C 12.4477 6 12 6.44769 12 7L 12 13C 12 13.5523 12.4477 14 13 14C 13.5523 14 14 13.5523 14 13L 14 7C 14 6.44769 13.5523 6 13 6Z" />
+</svg>

src/icons/security.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></svg>

src/icons/user.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
-</svg>
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>