Add profile image to navbar

app/templates/_layout.html

@@ -13,16 +13,43 @@
     <!-- Navbar -->
     <nav class="bg-blue-600 text-white p-4">
         <div class="container mx-auto flex justify-between items-center">
+            <!-- Logo -->
             <a href="/" class="text-2xl font-bold">BP Tracker</a>
-            <div>
+
+            <!-- Navigation Links -->
+            <div class="flex items-center space-x-4">
                 {% if current_user.is_authenticated %}
                 <a rel="prefetch" href="{{ url_for('main.dashboard') }}" class="px-4 py-2 hover:underline">Dashboard</a>
-                <a rel="prefetch" href="{{ url_for('user.profile') }}" class="px-4 py-2 hover:underline">Profile</a>
+
-                <a href="{{ url_for('auth.logout') }}" class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Logout</a>
+                <!-- Profile with Photo or Default Icon -->
+                <a rel="prefetch" href="{{ url_for('user.profile') }}"
+                    class="relative flex items-center space-x-2 group">
+                    {% if current_user.profile and current_user.profile.profile_pic %}
+                    <img src="data:image/png;base64,{{ current_user.profile.profile_pic }}" alt="Profile Picture"
+                        class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
+                    {% else %}
+                    <!-- Default SVG Icon -->
+                    <div
+                        class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-gray-600"
+                            viewBox="0 0 24 24">
+                            <path
+                                d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+                        </svg>
+                    </div>
+                    {% endif %}
+                    <span class="hidden sm:inline text-sm font-medium group-hover:underline">Profile</span>
+                </a>
+
+                <a href="{{ url_for('auth.logout') }}" class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">
+                    Logout
+                </a>
                 {% else %}
                 <a href="{{ url_for('auth.login') }}" class="px-4 py-2 hover:underline">Login</a>
                 <a href="{{ url_for('auth.signup') }}"
-                    class="px-4 py-2 bg-white text-blue-600 rounded hover:bg-gray-200">Signup</a>
+                    class="px-4 py-2 bg-white text-blue-600 rounded hover:bg-gray-200">
+                    Signup
+                </a>
                 {% endif %}
             </div>
         </div>