Merge branch 'dev' into main

.gitignore

@@ -1,4 +1,5 @@
 # customs ignore
+.DS_Store
 
 # Logs
 logs

client/src/routes/(app)/+layout.svelte

@@ -1,18 +1,20 @@
 <script>
   import "../../app.css";
-  import { page } from '$app/stores';
+  import { page } from "$app/stores";
   import { user } from "../../store/store.js";
-  import '@fortawesome/fontawesome-free/css/all.min.css'
+  import "@fortawesome/fontawesome-free/css/all.min.css";
   import { onMount } from "svelte";
 
   let backendUrl;
+  let loading = true;
 
   onMount(async () => {
     backendUrl = `http://${window.location.hostname}:3001/`;
     await fetchUser();
   });
 
   async function fetchUser() {
+    loading = true;
     try {
       const response = await fetch(`${backendUrl}currentuser`, {
         method: "GET",
@@ -23,6 +25,7 @@
       }
       let data = await response.json();
       user.set(data.user[0]);
+      loading = false;
     } catch (error) {
       console.error(
         "There has been a problem with your fetch operation:",
@@ -33,37 +36,49 @@
 </script>
 
 <header class="flex items-center justify-between p-4 border-b blur-effect">
-    <div>
-      <a href="/home" class="hidden text-2xl font-bold md:inline-block"
-        >HackMe</a
+  <div>
+    <a href="/home" class="hidden text-2xl font-bold md:inline-block">HackMe</a>
+  </div>
+
+
+    <div class="flex">
+      <a
+        class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center"
+        href="/write"
+      >
+        <i class="fa-solid fa-pen-nib" />
+      </a>
+
+      <a
+        class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center"
+        href="/settings"
       >
-    </div>
+        <i class="fa-solid fa-gear" />
+      </a>
+      <a
+        class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center"
+        href="/home"
+      >
+        <i class="fa-solid fa-house" />
+      </a>
+  </div>
 
-    <div class="flex items-center">
-      <span class="mx-2">{$user.firstname} {$user.lastname}</span>
+  <div class="flex items-center">
+    {#if loading}
+      <div class="py-4 ml-12">Loading...</div>
+    {:else}
+      <span class="mx-2">{$user.first_name} {$user.last_name}</span>
       <img
-        src={backendUrl + "avatar/"+ $user.avatar_path}
+        src={backendUrl + "avatar/" + $user.avatar}
         loading="lazy"
         alt="User avatar"
         class="mx-2 w-10 h-10 rounded-full"
       />
-      <div class="flex">
-        {#if $page.url.pathname != "/home"}
-          <a class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center" href="/home">
-            <i class="fa-solid fa-house"></i>
-          </a>
-        {/if}
-
-        {#if $page.url.pathname != "/settings"} 
-          <a class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center" href="/settings">
-            <i class="fa-solid fa-gear"></i>
-          </a>
-        {/if}
-      </div>
-    </div>
-  </header>
+    {/if}
+  </div>
+</header>
 
-<slot/>
+<slot />
 
 <style>
   header {
@@ -74,9 +89,6 @@
     background-color: white;
     z-index: 1000;
   }
-  main {
-    margin-top: 60px;
-  }
   .blur-effect {
     -webkit-backdrop-filter: blur(15px);
     backdrop-filter: blur(15px);
@@ -86,4 +98,4 @@
       rgba(255, 255, 255, 1)
     );
   }
-</style>
+</style>