update navbar

Author: liyunze-coding

src/components/global/NavBar.astro

@@ -1,5 +1,7 @@
 ---
 import { HoverNavigation } from "@/components/ui/HoverNavigation";
+import { Image } from "astro:assets";
+import pfp from "@/components/images/pfp_new.webp";
 
 const navLinks = [
 	{
@@ -26,13 +28,8 @@ const navLinks = [
 ---
 
 <div
-	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
+	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
 >
-	<img
-		src="/images/pfp_new.webp"
-		alt="Ryan"
-		width={50}
-		class="rounded-full"
-	/>
+	<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
 	<HoverNavigation items={navLinks} client:load />
 </div>