Default to profile picture with Initial if user has no profile picture

src/khoj/interface/web/assets/khoj.css

@@ -107,6 +107,10 @@ p#khoj-banner {
 }
 
 /* Dropdown in navigation menu*/
+#khoj-nav-menu-container {
+    display: flex;
+    align-items: center;
+}
 .khoj-nav-dropdown-content {
     display: block;
     grid-auto-flow: row;
@@ -115,6 +119,7 @@ p#khoj-banner {
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     right: 15vw;
+    top: 64px;
     z-index: 1;
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
@@ -140,13 +145,26 @@ p#khoj-banner {
     display: block;
     font-weight: bold;
 }
-img.circle {
+.circle {
     border-radius: 50%;
-    border: 2px solid var(--primary-hover);
+    border: 2px solid var(--primary-inverse);
     width: 40px;
     height: 40px;
     vertical-align: text-top;
     padding: 3px;
+    cursor: pointer;
+}
+.circle:hover {
+    background-color: var(--primary-hover);
+}
+.user-initial {
+    background-color: white;
+    color: black;
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    box-sizing: unset;
 }
 
 @media screen and (max-width: 700px) {

src/khoj/interface/web/base_config.html

@@ -34,13 +34,10 @@
         img.khoj-logo {
             max-width: none!important;
         }
-        div.khoj-header-wrapper{
+        div.khoj-header-wrapper {
             display: grid;
             grid-template-columns: 1fr min(70vw, 100%) 1fr;
         }
-        .khoj-header {
-            padding: 14px 0;
-        }
         img.circle {
             width: 49px;
             height: 49px;
@@ -268,13 +265,9 @@
                 width: 320px;
             }
 
-            div.khoj-header-wrapper{
+            div.khoj-header-wrapper {
                 grid-template-columns: auto;
             }
-            div.khoj-header {
-                padding: 14px 10px;
-            }
-
         }
     </style>
 </html>

src/khoj/interface/web/utils.html

@@ -1,4 +1,4 @@
-{% macro heading_pane(user_photo="/static/assets/icons/anon.png", username="Anon") -%}
+{% macro heading_pane(user_photo, username) -%}
     <div class="khoj-header">
         <a class="khoj-logo" href="/" target="_blank">
             <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
@@ -8,7 +8,11 @@
             <a class="khoj-nav" href="/">🔎 Search</a>
             <!-- Dropdown Menu -->
             <div id="khoj-nav-menu-container" class="khoj-nav dropdown">
-                <img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
+                {% if user_photo and user_photo != "None" %}
+                    <img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
+                {% else %}
+                    <div class="circle user-initial" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
+                {% endif %}
                 <div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
                     <div class="khoj-nav-username"> {{ username }} </div>
                     <a class="khoj-nav khoj-nav-selected" href="/config">⚙️ Settings</a>