Add support for displaying avatar in navbar

src/components/NavBar.astro

@@ -134,6 +134,7 @@ const username = Astro.cookies.get('username')?.value ?? "";
                 <li class="nav-item"><a href={element.url} class={`nav-url ${active === element.id ? "active" : ""}`}>{element.title}</a></li>
             )}
             <li class="nav-item"><span class="nav-username nav-keep-right">{username}</span></li>
+            {loggedIn === "true" ? <li class="nav-item"><img src="/gargamel.png" class="avatar-icon" /></li> : ""}
         </ul>
     </div>
     <div class="row">
@@ -190,10 +191,20 @@ nav ul {
 
 .nav-keep-right {
     position: absolute;
-    right: 20px;
+    right: 80px;
 }
 
 .active {
     color: lime;
 }
+
+.avatar-icon {
+    /* object-fit: contain; */
+    /* width: 100%; */
+    height: 50px;
+    border-radius: 50%;
+    border: 1px solid white;
+    position: absolute;
+    right: 13px;
+}
 </style>

src/pages/logout.astro

@@ -4,7 +4,7 @@ if(Astro.cookies.has('sessionToken')) {
 }
 
 if(Astro.cookies.has('username')) {
-    Astro.cookies.delete('uesrname');
+    Astro.cookies.delete('username');
 }
 
 if(Astro.cookies.has('userid')) {