Save avatar svg in shared data for header

src/components/DropdownProfile.jsx

@@ -43,7 +43,7 @@ function DropdownProfile({
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
         <div className="flex items-center truncate">
           <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
           <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">

src/pages/SharedData.jsx

@@ -9,10 +9,10 @@ import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
 function SharedData() {
 
   const sharedDataItems = {
-      data: '7234ABC3423423523457234ABC34234',
+      data: localStorage.getItem('digitalId'),
       items: [
         {
-          dataShared: '7234ABC3423423523457234ABC34234',
+          dataShared: localStorage.getItem('digitalId'),
           id: '923',
           text: 'United Kindom',
           typeItem: 'Residence',
@@ -35,7 +35,7 @@ function SharedData() {
           ],
         },
         {
-          dataShared: '7234ABC3423423523457234ABC34234',
+          dataShared: localStorage.getItem('digitalId'),
           id: '401',
           text: 'A123B3143',
           typeItem: 'Document ID',
@@ -54,6 +54,10 @@ function SharedData() {
         },
       ]
     };
+
+  function saveDigitalId() {
+    localStorage.setItem('svgAvatar', generateSvgAvatar())
+  }
   return (
     <main className="bg-white">
 
@@ -88,7 +92,7 @@ function SharedData() {
           <div className="flex mt-40 flex-col items-center gap-2.5">
             <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
             <span className="text-sm">{sharedDataItems.data}</span>
-            <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link>
+            <Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link>
           </div>
         </div>
 

src/partials/Sidebar.jsx

@@ -47,6 +47,10 @@ function Sidebar({
     }
   }, [sidebarExpanded]);
 
+  function saveDigitalId () {
+    localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
+  }
+
   return (
     <div>
       {/* Sidebar backdrop (mobile only) */}
@@ -416,7 +420,7 @@ function Sidebar({
                             </NavLink>
                           </li>
                           <li className="mb-1 last:mb-0">
-                            <NavLink end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
+                            <NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                               <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                 Shared Data
                               </span>