add new icon in mobile menu and styling

Author: warmijusti

app/custom/static/umap/theme.css

@@ -214,7 +214,7 @@ header.wrapper {
     display: block;
     background: none;
     border: none;
-    font-size: 1.5rem;
+    font-size: 2rem;
     cursor: pointer;
     padding: 0.5rem;
   }
@@ -231,15 +231,15 @@ header.wrapper {
       max-height 0.3s ease-out,
       opacity 0.15s ease-out;
     margin-top: var(--hot-spacing-small);
-    gap: 0;
+    gap: var(--hot-spacing-small);
   }
   .nav-links.open {
     max-height: 600px;
     opacity: 1;
     transition:
       max-height 0.4s ease-in,
       opacity 0.2s ease-in;
-    gap: 0;
+    gap: var(--hot-spacing-small);
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   }
   .hotosm-auth-desktop {

app/custom/templates/umap/navigation.html

@@ -7,7 +7,7 @@
   </section>
 
   <section>
-    <button class="nav-hamburger" aria-label="Menu" onclick="this.closest('nav').querySelector('.nav-links').classList.toggle('open')">&#9776;</button>
+    <button class="nav-hamburger" aria-label="Menu" onclick="this.closest('nav').querySelector('.nav-links').classList.toggle('open'); this.textContent = this.textContent.trim() === '✕' ? '☰' : '✕'">&#9776;</button>
     <ul class="nav-links">
       {% if AUTH_PROVIDER != 'hanko' %}
         {% if user.is_authenticated %}<li><a href="{% url 'user_dashboard' %}">{% trans "My Dashboard" %} ({{ user }})</a></li><li><a href="{{ user.get_stars_url }}">{% trans "Starred maps" %}</a></li>{% else %}<li><a href="{% url 'login' %}" class="login">{% trans "Log in" %} / {% trans "Sign in" %}</a></li>{% endif %}