From e45edbb99291fda02c7097d93852d2ff79bd568f Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 7 Apr 2024 14:52:06 +0530
Subject: [PATCH] Collapse navigation tabs into icons on mobile. Add spacing to
 them

---
 src/khoj/interface/web/assets/khoj.css | 12 ++++++++++++
 src/khoj/interface/web/utils.html      |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 3d7e7d4a..0d0e33bf 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -76,6 +76,9 @@
     padding: 16px 0;
     margin: 0;
 }
+.khoj-header {
+    align-items: center;
+}
 .khoj-footer {
     margin: 16px 0 0 0;
 }
@@ -112,6 +115,9 @@ a.khoj-logo {
 .khoj-nav-selected {
     background-color: var(--primary);
 }
+span.khoj-nav-item-text {
+    padding-left: 8px;
+}
 img.khoj-logo {
     width: min(60vw, 90px);
     max-width: 100%;
@@ -212,4 +218,10 @@ img.khoj-logo {
         grid-gap: 0px;
         justify-content: space-between;
     }
+    a.khoj-nav {
+        padding: 0 16px;
+    }
+    span.khoj-nav-item-text {
+        display: none;
+    }
 }
diff --git a/src/khoj/interface/web/utils.html b/src/khoj/interface/web/utils.html
index 6a8a8c62..7cf7cfcd 100644
--- a/src/khoj/interface/web/utils.html
+++ b/src/khoj/interface/web/utils.html
@@ -4,10 +4,10 @@
             <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png?v={{ khoj_version }}" alt="Khoj"></img>
         </a>
         <nav class="khoj-nav">
-            <a id="chat-nav" class="khoj-nav" href="/chat">💬 Chat</a>
-            <a id="agents-nav" class="khoj-nav" href="/agents">🧞‍♂️️️ Agents</a>
+            <a id="chat-nav" class="khoj-nav" href="/chat">💬 <span class="khoj-nav-item-text">Chat</span></a>
+            <a id="agents-nav" class="khoj-nav" href="/agents">🤖 <span class="khoj-nav-item-text">Agents</span></a>
             {% if has_documents %}
-            <a id="search-nav" class="khoj-nav" href="/search">🔎 Search</a>
+            <a id="search-nav" class="khoj-nav" href="/search">🔎 <span class="khoj-nav-item-text">Search</span></a>
             {% endif %}
             <!-- Dropdown Menu -->
             {% if username %}