fix: sidebar color (#510)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -4,15 +4,15 @@
     <div @click="sidebarDesktopOpen = !sidebarDesktopOpen"
          hx-get="{% url "admin:toggle_sidebar" %}"
          hx-swap="none"
-         class="block bg-white border cursor-pointer fixed flex h-6 hidden items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 w-6 z-50 xl:flex dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+         class="bg-white border cursor-pointer fixed h-6 hidden items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 w-6 z-50 xl:flex dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
          :class="{'ml-6 rotate-180': !sidebarDesktopOpen, 'ml-72': sidebarDesktopOpen}">
         <span class="material-symbols-outlined md-16">
             first_page
         </span>
     </div>
 
     <div @click="sidebarMobileOpen = !sidebarMobileOpen"
-         class="fixed bottom-0 bg-gray-700 flex cursor-pointer flex items-center left-0 mb-2 ml-2 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
+         class="fixed bottom-0 bg-gray-700 cursor-pointer flex items-center left-0 mb-2 ml-2 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
         :class="{'ml-72 -translate-x-1/2': sidebarMobileOpen}">
         {% trans "Menu" %}
     </div>

src/unfold/templates/admin/nav_sidebar.html

@@ -1,23 +1,25 @@
 {% load i18n %}
 
 <div class="relative min-w-sidebar transition-width w-sidebar z-30">
-    <nav id="nav-sidebar" class="bg-gray-50 border-r border-gray-200 flex flex-col fixed max-h-screen min-h-screen min-w-sidebar transition-width w-sidebar dark:bg-gray-950 dark:border-gray-800">
-        <div class="border-b border-gray-200 mb-5 py-3 dark:border-gray-800">
-            <div class="flex font-medium h-10 items-center px-6 text-gray-700 dark:text-gray-200">
-                {% if site_logo %}
-                    {% include "unfold/helpers/site_logo.html" %}
-                {% elif branding %}
-                    {% include "unfold/helpers/site_icon.html" %}
-                {% endif %}
+    <nav id="nav-sidebar" class="bg-gray-50 border-r border-gray-200 fixed max-h-screen  transition-width w-sidebar dark:bg-gray-900 dark:border-gray-800">
+        <div class="flex flex-col min-h-screen min-w-sidebar dark:bg-gray-950/20">
+            <div class="border-b border-gray-200 mb-5 py-3 dark:border-gray-800">
+                <div class="flex font-medium h-10 items-center px-6 text-gray-700 dark:text-gray-200">
+                    {% if site_logo %}
+                        {% include "unfold/helpers/site_logo.html" %}
+                    {% elif branding %}
+                        {% include "unfold/helpers/site_icon.html" %}
+                    {% endif %}
+                </div>
             </div>
-        </div>
 
-        {% include "unfold/helpers/search.html" %}
+            {% include "unfold/helpers/search.html" %}
 
-        {% if sidebar_navigation|length > 0 %}
-            {% include "unfold/helpers/app_list.html" with app_list=available_apps %}
-        {% else %}
-            {% include "admin/app_list.html" with app_list=available_apps show_changelinks=False %}
-        {% endif %}
+            {% if sidebar_navigation|length > 0 %}
+                {% include "unfold/helpers/app_list.html" with app_list=available_apps %}
+            {% else %}
+                {% include "admin/app_list.html" with app_list=available_apps show_changelinks=False %}
+            {% endif %}
+        </div>
     </nav>
 </div>