feat: sidebar collapse icon (#883)

Author: lukasvinclav

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

@@ -1,22 +1,13 @@
 {% load i18n %}
 
 <div class="relative z-50">
-    <div @click="sidebarDesktopOpen = !sidebarDesktopOpen"
-         hx-get="{% url "admin:toggle_sidebar" %}"
-         hx-swap="none"
-         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 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>
 
+
     <div :class="{'xl:block': sidebarDesktopOpen, 'xl:hidden': !sidebarDesktopOpen, 'max-xl:fixed': sidebarMobileOpen, 'hidden': !sidebarMobileOpen }">
         {% include "unfold/helpers/navigation.html" %}
     </div>

src/unfold/templates/admin/nav_sidebar.html

@@ -1,6 +1,14 @@
 {% load i18n %}
 
-<div class="flex-grow font-semibold min-w-0 mr-3">
+<div class="flex flex-row flex-grow font-semibold items-center min-w-0 mr-3">
+    <span class="cursor-pointer hidden flex-row items-center text-sm xl:flex">
+        <span class="material-symbols-outlined" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
+            dock_to_right
+        </span>
+    </span>
+
+    <span class="hidden bg-gray-200 h-5 mx-3 w-px xl:block dark:bg-gray-700"></span>
+
     <h1 class="overflow-hidden text-ellipsis text-sm whitespace-nowrap xl:text-base text-font-important-light dark:text-font-important-dark">
         {% if content_title %}
             <span class="tracking-tight">