From 95957961010bbb55f96030f6e3750e83ba7d0243 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Tue, 23 Jan 2024 11:43:04 +0300
Subject: [PATCH] feat: Even *more* adaptive navbar

Oh and icons can be disabled without the nav turning into shit
---
 sass/_nav.scss              | 25 ++++++++++++++++++++++---
 templates/includes/nav.html | 32 +++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/sass/_nav.scss b/sass/_nav.scss
index 2e083a1..6ef2695 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -11,9 +11,10 @@
   width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 1;
 
-  @media screen and (max-width: 480px) {
+  @media screen and (max-width: 720px) {
     & {
-      position: static;
+      width: auto;
+      max-width: min(calc(var(--content-width) + 10rem), 90%);
     }
   }
 
@@ -24,7 +25,7 @@
     align-items: center;
     padding: 0.5rem;
 
-    @media screen and (max-width: 630px) {
+    @media screen and (max-width: 720px) {
       & {
         justify-content: center;
       }
@@ -61,6 +62,24 @@
       &:active {
         transform: scale(var(--active));
       }
+
+      @media screen and (max-width: 480px) {
+        &:has(span) {
+          padding: 0.325rem 0.625rem;
+
+          span {
+            display: none;
+          }
+        }
+      }
+    }
+
+    #home {
+      margin-right: 0.25rem;
+    }
+
+    #feed {
+      margin-left: 0.25rem;
     }
   }
 }
diff --git a/templates/includes/nav.html b/templates/includes/nav.html
index fb7a9ae..babc0b4 100644
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@@ -1,10 +1,12 @@
 <header id="site-nav">
   <nav>
-    <a id="title" href="{{ get_url(path='') }}">
+    <a id="home" href="{{ get_url(path='') }}">
       {% if config.extra.nav.icons %}
         <i class="bi bi-house"></i>
+        <span>{{ config.title }}</span>
+      {% else %}
+        {{ config.title }}
       {% endif %}
-      {{ config.title }}
     </a>
     <ul>
       {% for link in config.extra.nav.links %}
@@ -13,22 +15,26 @@
           {% if config.extra.nav.icons %}
             {% if link.icon %}
               <i class="bi bi-{{ link.icon }}"></i>
+              <span>{{ link.name }}</span>
+            {% else %}
+              {{ link.name }}
             {% endif %}
+          {% else %}
+            {{ link.name }}
           {% endif %}
-          {{ link.name }}
         </a>
       </li>
       {% endfor %}
-      {% if config.extra.nav.show_feed %}
-      <li>
-        <a href="{{ get_url(path='') }}/{{ config.feed_filename }}">
-          {% if config.extra.nav.icons %}
-            <i class="bi bi-rss"></i>
-          {% endif %}
-          Feed
-        </a>
-      </li>
-      {% endif %}
     </ul>
+    {% if config.extra.nav.show_feed %}
+    <a id="feed" href="{{ get_url(path='') }}/{{ config.feed_filename }}">
+      {% if config.extra.nav.icons %}
+        <i class="bi bi-rss"></i>
+        <span class="link-name">Feed</span>
+      {% else %}
+        Feed
+      {% endif %}
+    </a>
+    {% endif %}
   </nav>
 </header>