Add profile button in navigation

src/components/Navigation/AccountDropdownList.tsx

@@ -1,4 +1,12 @@
-import { ChevronRight, LogOut, Map, Plus, User2, Users2 } from 'lucide-react';
+import {
+  ChevronRight,
+  LogOut,
+  Map,
+  Plus,
+  SquareUserRound,
+  User2,
+  Users2,
+} from 'lucide-react';
 import { logout } from './navigation';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 import { useState } from 'react';
@@ -23,6 +31,20 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
           Account
         </a>
       </li>
+      <li className="px-1">
+        <a
+          href="/account/update-profile"
+          className="group flex items-center justify-between gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+        >
+          <span className="flex items-center gap-2">
+            <SquareUserRound className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
+            Profile
+          </span>
+          <span className="rounded-sm bg-yellow-300 px-1 text-xs uppercase tracking-wide text-black">
+            New
+          </span>
+        </a>
+      </li>
       <li className="px-1">
         <a
           href="/account/friends"
@@ -66,7 +88,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       </li>
       <li className="px-1">
         <button
-          className="group flex gap-2 items-center w-full rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
           type="button"
           onClick={logout}
         >