From 2df03cbfe051c15bd3d58ee498275e019947e497 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 29 May 2024 21:34:34 -0400
Subject: [PATCH] tweak header

---
 common/static/scss/_header.scss | 34 ++++++++++++++++++++++++++-------
 common/templates/_header.html   | 20 ++++++++++++++-----
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/common/static/scss/_header.scss b/common/static/scss/_header.scss
index 641cacc1..19413292 100644
--- a/common/static/scss/_header.scss
+++ b/common/static/scss/_header.scss
@@ -133,21 +133,41 @@ body {
     .nav-search {
       order: 999;
       display: none;
+      min-width: unset !important;
+      li {
+        padding: 0px;
+        padding-bottom: 4px;
+        select {
+          max-width: 6em !important;
+        }
+        input[type="submit"] {
+          padding-left: calc(var(--pico-nav-link-spacing-horizontal)*1);
+          padding-right: calc(var(--pico-nav-link-spacing-horizontal)*1);
+        }
+      }
     }
 
-    .nav-search li {
-      padding: 0px;
-      padding-bottom: 4px;
+    .nav-links li.small-only {
+      font-size: 150%;
+      a {
+        color: var(--pico-secondary);
+      }
     }
+    .nav-dropdown {
+      li {
+        padding-left: 0;
+        padding-right: 0;
 
-    .nav-search input[type="submit"] {
-      padding-left: calc(var(--pico-nav-link-spacing-horizontal)*1);
-      padding-right: calc(var(--pico-nav-link-spacing-horizontal)*1);
+        summary {
+          padding: 0 !important;
+        }
+      }
     }
-
+    /*
     .nav-dropdown::after {
       flex-basis: 100%;
       width: 0;
     }
+    */
   }
 }
diff --git a/common/templates/_header.html b/common/templates/_header.html
index 9fa770d6..2281c822 100644
--- a/common/templates/_header.html
+++ b/common/templates/_header.html
@@ -49,19 +49,29 @@
         </form>
       </li>
     </ul>
-    <ul>
+    <ul class="nav-links">
       <li class="small-only">
-        <a _="on click toggle .unhide on .nav-search then call #q.focus()">{% trans 'Search' %}</a>
+        <a _="on click toggle .unhide on .nav-search then call #q.focus()"
+           href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
       </li>
-      <li>
+      <li class="small-only">
+        <a href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a>
+      </li>
+      <li class="small-only">
+        <a href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a>
+      </li>
+      <li class="small-only">
+        <a href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a>
+      </li>
+      <li class="large-only">
         <a class="{% if current == 'discover' %}secondary{% endif %}"
            href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
       </li>
-      <li>
+      <li class="large-only">
         <a class="{% if current == 'timeline' %}secondary{% endif %}"
            href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
       </li>
-      <li>
+      <li class="large-only">
         <a class="{% if current == 'home' %}secondary{% endif %}"
            href="{% url 'common:me' %}">{% trans 'Home' %}</a>
       </li>