Add new menu item indicator

src/components/AccountSidebar.astro

@@ -9,48 +9,52 @@ export interface Props {
 }
 
 const sidebarLinks = [
-    {
+  {
-        href: '/account',
+    href: '/account',
-        title: 'Activity',
+    title: 'Activity',
-        id: 'activity',
+    id: 'activity',
-        icon: {
+    isNew: false,
-            glyph: 'analytics',
+    icon: {
-            classes: 'h-3 w-4',
+      glyph: 'analytics',
-        }
+      classes: 'h-3 w-4',
     },
-    {
+  },
-        href: '/account/road-card',
+  {
-        title: 'Card',
+    href: '/account/road-card',
-        id: 'road-card',
+    title: 'Card',
-        icon: {
+    id: 'road-card',
-            glyph: 'badge',
+    isNew: true,
-            classes: 'h-4 w-4',
+    icon: {
-        }
+      glyph: 'badge',
+      classes: 'h-4 w-4',
     },
-    {
+  },
-        href: '/account/update-profile',
+  {
-        title: 'Profile',
+    href: '/account/update-profile',
-        id: 'profile',
+    title: 'Profile',
-        icon: {
+    id: 'profile',
-            glyph: 'user',
+    isNew: false,
-            classes: 'h-4 w-4',
+    icon: {
-        }
+      glyph: 'user',
+      classes: 'h-4 w-4',
     },
-    {
+  },
-        href: '/account/update-password',
+  {
-        title: 'Security',
+    href: '/account/update-password',
-        id: 'change-password',
+    title: 'Security',
-        icon: {
+    id: 'change-password',
-            glyph: 'security',
+    isNew: false,
-            classes: 'h-4 w-4'
+    icon: {
-        }
+      glyph: 'security',
+      classes: 'h-4 w-4',
     },
+  },
 ];
 ---
 
 <div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'>
   <button
-    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-gray-900 text-sm font-medium'
+    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-sm font-medium text-gray-900'
     id='settings-menu'
   >
     {activePageTitle}
@@ -61,42 +65,67 @@ const sidebarLinks = [
     class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
   >
     {
-      sidebarLinks.map((sidebarLink) => (
+      sidebarLinks.map((sidebarLink) => {
-        <li>
+        const isActive = activePageId === sidebarLink.id;
-          <a
+
-            href={sidebarLink.href}
+        return (
-            class={`flex items-center w-full rounded px-3 py-1.5 text-slate-900 hover:bg-slate-200 text-sm ${
+          <li>
-              activePageId === sidebarLink.id ? 'bg-slate-100' : ''
+            <a
-            }`}
+              href={sidebarLink.href}
-          >
+              class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
-              <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-2`} />
+                isActive ? 'bg-slate-100' : ''
+              }`}
+            >
+              <AstroIcon
+                icon={sidebarLink.icon.glyph}
+                class={`${sidebarLink.icon.classes} mr-2`}
+              />
               {sidebarLink.title}
-          </a>
+            </a>
-        </li>
+          </li>
-      ))
+        );
+      })
     }
   </ul>
 </div>
 
 <div class='container flex min-h-screen items-stretch'>
   <!-- Start Desktop Sidebar -->
-  <aside class='hidden shrink-0 w-44 border-r border-slate-200 py-10 md:block'>
+  <aside class='hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block'>
     <nav>
       <ul class='space-y-1'>
         {
-          sidebarLinks.map((sidebarLink) => (
+          sidebarLinks.map((sidebarLink) => {
-            <li>
+            const isActive = activePageId === sidebarLink.id;
-              <a
+
-                href={sidebarLink.href}
+            return (
-                class={`font-regular flex w-full items-center gap-2 px-2 py-1.5 text-sm border-r-2 ${
+              <li>
-                  activePageId === sidebarLink.id ? 'text-black border-r-black bg-gray-100' : 'text-gray-500 border-r-transparent hover:border-r-gray-300'
+                <a
-                }`}
+                  href={sidebarLink.href}
-              >
+                  class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
-                <AstroIcon icon={sidebarLink.icon.glyph} class={`${sidebarLink.icon.classes} mr-0`} />
+                    isActive
-                {sidebarLink.title}
+                      ? 'border-r-black bg-gray-100 text-black'
-              </a>
+                      : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
-            </li>
+                  }`}
-          ))
+                >
+                  <span class='flex flex-grow items-center'>
+                    <AstroIcon
+                      icon={sidebarLink.icon.glyph}
+                      class={`${sidebarLink.icon.classes} mr-2`}
+                    />
+                    {sidebarLink.title}
+                  </span>
+
+                  {sidebarLink.isNew && !isActive && (
+                    <span class='relative mr-1 flex items-center'>
+                      <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
+                      <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
+                    </span>
+                  )}
+                </a>
+              </li>
+            );
+          })
         }
       </ul>
     </nav>

src/components/Activity/ActivityPage.tsx

@@ -97,19 +97,6 @@ export function ActivityPage() {
 
         {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
           <>
-            <a
-              href="/account/road-card"
-              className="text-md group mb-7 hidden items-center text-red-600 hover:text-red-900 sm:flex"
-            >
-              <span class="mr-2 rounded-sm bg-red-600 px-1.5 py-0.5 text-xs font-medium uppercase text-white group-hover:bg-red-800">
-                New
-              </span>
-              <span className="mr-1 underline">
-                Share your progress with others using a{' '}
-                <span className="font-medium">#RoadCard</span>
-              </span>
-              <span>»</span>
-            </a>
             <h2 class="mb-3 text-xs uppercase text-gray-400">
               Continue Following
             </h2>