Add basic UI for activity dashboard

src/components/AccountSidebar.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from './AstroIcon.astro';
+import AstroIcon from './AstroIcon.astro';
 
 const { activePageId, activePageTitle } = Astro.props;
 
@@ -7,58 +7,74 @@ export interface Props {
   activePageId: string;
   activePageTitle: string;
 }
+
+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',
+  },
+];
 ---
 
-<div class='relative block mb-5 md:hidden p-4 border-b shadow-inner'>
+<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 font-medium text-gray-900'
     id='settings-menu'
   >
     {activePageTitle}
-    <Icon icon='dropdown' />
+    <AstroIcon icon='dropdown' />
   </button>
   <ul
     id='settings-menu-dropdown'
-    class='absolute mt-1 hidden left-0 right-0 space-y-1.5 bg-white p-2 shadow-lg z-10'
+    class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
   >
+    {
+      sidebarLinks.map((sidebarLink) => (
         <li>
           <a
-        href='/account/update-profile'
+            href={sidebarLink.href}
-        class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${activePageId === 'profile' ? 'bg-slate-100' : ''}`
+            class={`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${
-        >Profile</a
+              activePageId === sidebarLink.id ? 'bg-slate-100' : ''
-      >
+            }`}
-    </li>
-    <li>
-      <a
-        href='/account/update-password'
-        class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${activePageId === 'change-password' ? 'bg-slate-100' : ''}`
-        >Change password</a
           >
+            {sidebarLink.title}
+          </a>
         </li>
+      ))
+    }
   </ul>
 </div>
 
 <div class='container flex min-h-screen items-stretch'>
   <!-- Start Desktop Sidebar -->
-  <aside class='hidden w-56 border-r border-slate-200 py-10 pr-5 md:block'>
+  <aside class='hidden shrink-0 w-48 border-r border-slate-200 py-10 pr-5 md:block'>
     <nav>
       <ul class='space-y-1'>
+        {
+          sidebarLinks.map((sidebarLink) => (
             <li>
               <a
-            href='/account/update-profile'
+                href={sidebarLink.href}
-            class=`block w-full rounded px-2 py-1.5 font-regular text-slate-900 hover:bg-slate-100 ${activePageId === 'profile' ? 'bg-slate-100' : ''}`
+                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' : ''
+                }`}
               >
-            Profile
+                {sidebarLink.title}
-          </a>
-        </li>
-        <li>
-          <a
-            href='/account/update-password'
-            class=`block w-full rounded px-2 py-1.5 font-regular text-slate-900 hover:bg-slate-100 ${activePageId === 'change-password' ? 'bg-slate-100' : ''}`
-          >
-            Security
               </a>
             </li>
+          ))
+        }
       </ul>
     </nav>
   </aside>

src/components/Authenticator/authenticator.ts

@@ -34,6 +34,7 @@ function handleGuest() {
   const authenticatedRoutes = [
     '/account/update-profile',
     '/account/update-password',
+    '/account',
   ];
 
   showHideAuthElements('hide');

src/components/Navigation/AccountDropdown.astro

@@ -24,10 +24,10 @@ import Icon from '../AstroIcon.astro';
     <ul>
       <li class='px-1'>
         <a
-          href='/account/update-profile'
+          href='/account'
           class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
-          Settings
+          Profile
         </a>
       </li>
       <li class='px-1'>

src/components/Navigation/Navigation.astro

@@ -98,10 +98,10 @@ import AccountDropdown from './AccountDropdown.astro';
         <!-- Links for logged in users -->
         <li data-auth-required class='hidden'>
           <a
-            href='/account/update-profile'
+            href='/account'
             class='text-xl hover:text-blue-300 md:text-lg'
           >
-            Settings
+            Account
           </a>
         </li>
         <li data-auth-required class='hidden'>

src/components/Navigation/navigation.ts

@@ -1,5 +1,4 @@
 import Cookies from 'js-cookie';
-import { handleAuthRequired } from '../Authenticator/authenticator';
 import { TOKEN_COOKIE_NAME } from "../../lib/jwt";
 
 export function logout() {

src/pages/account/index.astro

@@ -0,0 +1,41 @@
+---
+import AccountSidebar from '../../components/AccountSidebar.astro';
+import AccountLayout from '../../layouts/AccountLayout.astro';
+---
+
+<AccountLayout title='Update Profile' noIndex={true}>
+  <AccountSidebar activePageId='activity' activePageTitle='Activity'>
+    <div class='mx-0 -mt-5 sm:-mx-10 md:-mt-10'>
+      <div class='flex gap-2 divide-x border-b'>
+        <div class='flex flex-1 flex-col px-4 pb-4 pt-5 text-center sm:pt-10'>
+          <h2 class='text-5xl font-bold'>30</h2>
+          <p class='mt-2 text-sm text-gray-400'>Topics Completed</p>
+        </div>
+        <div class='flex flex-1 flex-col px-4 pb-4 pt-5 text-center sm:pt-10'>
+          <h2 class='mb-1 text-5xl font-bold'>20</h2>
+          <p class='mt-2 text-sm text-gray-400'>Currently Learning</p>
+        </div>
+        <div class='flex flex-1 flex-col px-4 pb-4 pt-5 text-center sm:pt-10'>
+          <h2 class='mb-1 text-5xl font-bold'>2d</h2>
+          <p class='mt-2 text-sm text-gray-400'>Learning Streak</p>
+        </div>
+      </div>
+    </div>
+
+    <div class='-mx-10 border-b px-8 py-8'>
+      <h2 class='mb-3 text-xs uppercase text-gray-400'>Continue Learning</h2>
+      <div class='flex flex-col gap-2'>
+        <a
+          href='#'
+          class='relative flex items-center rounded-md border p-3 text-gray-600 group hover:border-gray-300 hover:text-black'
+        >
+          <span
+            class='absolute left-0 top-0 block h-full w-[50%] rounded-l-md bg-black/5 group-hover:bg-black/10'
+          ></span>
+          <span class='relative flex-1'>Frontend Roadmap</span>
+          <span class='text-sm text-gray-400'>5 / 142</span>
+        </a>
+      </div>
+    </div>
+  </AccountSidebar>
+</AccountLayout>