feat: sidebar user dropdown

src/unfold/settings.py

@@ -15,6 +15,7 @@
     "SHOW_HISTORY": True,
     "SHOW_VIEW_ON_SITE": True,
     "SHOW_LANGUAGES": False,
+    "LANGUAGE_FLAGS": {},
     "SHOW_BACK_BUTTON": False,
     "COLORS": {
         "base": {

src/unfold/sites.py

@@ -98,6 +98,7 @@ def each_context(self, request: HttpRequest) -> dict[str, Any]:
             "show_history": self._get_config("SHOW_HISTORY", request),
             "show_view_on_site": self._get_config("SHOW_VIEW_ON_SITE", request),
             "show_languages": self._get_config("SHOW_LANGUAGES", request),
+            "language_flags": self._get_config("LANGUAGE_FLAGS", request),
             "show_back_button": self._get_config("SHOW_BACK_BUTTON", request),
             "theme": self._get_config("THEME", request),
             "border_radius": self._get_config("BORDER_RADIUS", request),

src/unfold/templates/unfold/components/button.html

@@ -8,6 +8,6 @@
     bg-transparent text-font-important-light dark:text-font-important-dark
 {% else %}
     border border-base-200 bg-primary-600 border-transparent text-white
-{% endif %}{% if class %} {{ class }}{% endif %}" {% include "unfold/helpers/attrs.html" %}>
+{% endif %}{% if class %} {{ class }}{% endif %}" {% include "unfold/helpers/attrs.html" %} {% if extra_attrs %}{{ extra_attrs }}{% endif %}>
 {{ children }}
 </{% if href %}a{% else %}button{% endif%}>

src/unfold/templates/unfold/helpers/account_links.html

@@ -1,45 +1,32 @@
 {% load i18n %}
 
-<div class="relative" x-data="{ openUserLinks: false }">
-    <a class="block cursor-pointer h-[18px] hover:text-base-700 dark:hover:text-base-200" @click="openUserLinks = !openUserLinks">
-        <span class="material-symbols-outlined">person</span>
-    </a>
-
-    <nav class="absolute bg-white border border-base-200 flex flex-col leading-none py-1 -right-2 rounded-default shadow-lg top-7 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openUserLinks" x-transition x-on:click.outside="openUserLinks = false">
-        <div class="border-b border-base-200 flex flex-row shrink-0 items-start justify-start mb-1 pb-1 dark:border-base-700">
-            <span class="block mx-1 px-3 py-2 truncate">
-                {% firstof user.get_short_name user.get_username %}
-            </span>
-        </div>
 
-        {% if site_url %}
-            <a href="{{ site_url }}" target="_blank" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
-                {% translate 'View site' %}
-            </a>
-        {% endif %}
+{% if site_url %}
+    <a href="{{ site_url }}" target="_blank" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
+        {% translate 'View site' %}
+    </a>
+{% endif %}
 
-        {% if account_links %}
-            {% for link in account_links %}
-                <a href="{{ link.link }}" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
-                    {{ link.title }}
-                </a>
-            {% endfor %}
-        {% else %}
-            {% if user.has_usable_password %}
-                <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
-                    {% translate 'Change password' %}
-                </a>
-            {% endif %}
-        {% endif %}
+{% if account_links %}
+    {% for link in account_links %}
+        <a href="{{ link.link }}" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
+            {{ link.title }}
+        </a>
+    {% endfor %}
+{% else %}
+    {% if user.has_usable_password %}
+        <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200">
+            {% translate 'Change password' %}
+        </a>
+    {% endif %}
+{% endif %}
 
-        <div class="border-t border-base-200 mt-1 pt-1 dark:border-base-700">
-            <form id="logout-form" method="post" action="{% url 'admin:logout' %}" class="mx-1">
-                {% csrf_token %}
+<div class="border-t border-base-200 mt-1 pt-1 dark:border-base-700">
+    <form id="logout-form" method="post" action="{% url 'admin:logout' %}" class="mx-1">
+        {% csrf_token %}
 
-                <button type="submit" class="bg-none block cursor-pointer px-3 py-2 text-left text-red-500 rounded-default w-full hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
-                    {% translate 'Log out' %}
-                </button>
-            </form>
-        </div>
-    </nav>
+        <button type="submit" class="bg-none flex cursor-pointer items-center px-3 py-2 text-left text-red-500 rounded-default w-full hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
+            {% translate 'Log out' %} <span class="ml-auto material-symbols-outlined text-red-500 dark:text-red-500">logout</span>
+        </button>
+    </form>
 </div>

src/unfold/templates/unfold/helpers/add_link.html

@@ -10,10 +10,6 @@
 
 {% if add_url %}
     <div class="flex flex-row items-center">
-        {% if not hide_separator %}
-            <span class="block bg-base-200 h-5 mx-4 w-px dark:bg-base-700"></span>
-        {% endif %}
-
         <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink bg-primary-600 flex items-center h-9 justify-center -my-1 rounded-full w-9" title="{{ title }}">
             <span class="material-symbols-outlined text-white">add</span>
         </a>

src/unfold/templates/unfold/helpers/header.html

@@ -4,7 +4,7 @@
     {% block header %}
         <div class="bg-white border-b border-base-200 mb-6 px-4 z-40 dark:bg-base-900 dark:border-base-800 dark:text-font-default-dark {% element_classes 'header' %}">
             <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} flex items-center h-16 mx-auto py-4">
-                <div id="header-inner" class="flex items-center w-full">
+                <div id="header-inner" class="flex items-center relative w-full">
                     <div class="flex items-center w-full">
                         {% block usertools %}
                             {% if has_permission %}

src/unfold/templates/unfold/helpers/language_form.html

@@ -4,7 +4,13 @@
     <input name="next" type="hidden" value="{{ redirect_to }}">
     <input name="language" type="hidden" value="{{ language.code }}">
 
-    <button type="submit" class="block cursor-pointer grow mx-1 px-3 py-2 rounded-default text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200 {% if language.code == LANGUAGE_CODE %}text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!{% endif %}">
-        {{ language.name_local }} ({{ language.code }})
+    <button type="submit" class="block cursor-pointer flex flex-row grow items-center gap-1 mx-1 px-3 py-2 rounded-default text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200 {% if language.code == LANGUAGE_CODE %}text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!{% endif %}">
+        {% for language_key, language_flag in language_flags.items %}
+            {% if language_key == language.code %}
+                <span class="mr-1">{{ language_flag }}</span>
+            {% endif %}
+        {% endfor %}
+
+        {{ language.name_local }} <span class="ml-auto uppercase font-semibold text-xs text-subtle">{{ language.code }}</span>
     </button>
 </form>

src/unfold/templates/unfold/helpers/language_switch.html

@@ -5,21 +5,15 @@
 {% get_language_info_list for LANGUAGES as languages %}
 
 {% if show_languages %}
-    <div class="relative" x-data="{ openLanguageLinks: false }">
-        <a class="block cursor-pointer h-[18px] hover:text-base-700 dark:hover:text-base-200" x-on:click="openLanguageLinks = !openLanguageLinks">
-            <span class="material-symbols-outlined">translate</span>
-        </a>
+    {% if languages_list %}
+        {% for language in languages_list %}
+            {% include "unfold/helpers/language_form.html" with language=language %}
+        {% endfor %}
+    {% else %}
+        {% for language in languages %}
+            {% include "unfold/helpers/language_form.html" with language=language %}
+        {% endfor %}
+    {% endif %}
 
-        <div class="absolute bg-white border border-base-200 flex flex-col leading-none py-1 -right-2 rounded-default shadow-lg top-7 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openLanguageLinks" x-transition x-on:click.outside="openLanguageLinks = false">
-            {% if languages_list %}
-                {% for language in languages_list %}
-                    {% include "unfold/helpers/language_form.html" with language=language %}
-                {% endfor %}
-            {% else %}
-                {% for language in languages %}
-                    {% include "unfold/helpers/language_form.html" with language=language %}
-                {% endfor %}
-            {% endif %}
-        </div>
-    </div>
+    <div class="border-t border-base-200 mt-1 pt-1 dark:border-base-700"></div>
 {% endif %}

src/unfold/templates/unfold/helpers/navigation.html

@@ -10,4 +10,6 @@
     {% else %}
         {% include "admin/app_list.html" with app_list=available_apps show_changelinks=False %}
     {% endif %}
+
+    {% include "unfold/helpers/navigation_user.html" %}
 </nav>

src/unfold/templates/unfold/helpers/navigation_header.html

@@ -1,7 +1,7 @@
 {% load unfold %}
 
 <div class="border-b border-base-200 flex gap-3 items-center h-[65px] mb-6 dark:border-base-800 px-3 {% element_classes 'navigation_header' %}" {% if site_dropdown %}x-data="{ openDropdown: false }"{% endif %}>
-    <div class="bg-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[54px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded-default transition-all hover:bg-base-100 dark:hover:bg-white/[.06]{% endif %}"
+    <div class="bg-transparent flex font-semibold gap-3 grow min-w-0 h-[64px] items-center px-3 {% if site_dropdown %}cursor-pointer transition-all -mx-3 px-6 hover:bg-base-100 dark:hover:bg-white/[.06]{% endif %}"
          {% if site_dropdown %}
              x-on:click="openDropdown = !openDropdown"
              x-bind:class="{'bg-base-100 dark:bg-white/[.06]': openDropdown, 'bg-transparent': !openDropdown}"

src/unfold/templates/unfold/helpers/navigation_user.html

@@ -0,0 +1,36 @@
+<div class="border-t border-base-200 px-6 py-3 relative dark:border-base-800" x-data="{ openUserLinks: false }">
+    <nav class="absolute bg-white border border-base-200 flex flex-col leading-none py-1 rounded-default shadow-lg bottom-[73px] left-3 right-3 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openUserLinks" x-transition x-on:click.outside="openUserLinks = false">
+        {% include "unfold/helpers/theme_switch.html" %}
+
+        {% include "unfold/helpers/language_switch.html" %}
+
+        {% if extra_userlinks %}
+            {{ extra_userlinks }}
+        {% endif %}
+
+        {% include "unfold/helpers/account_links.html" %}
+    </nav>
+
+    <div class="cursor-pointer flex flex-row gap-3 items-center min-h-[64px] -mx-6 -my-3 px-6 py-3 hover:bg-base-100 dark:hover:bg-base-800" x-on:click="openUserLinks = !openUserLinks" x-bind:class="{'bg-base-100 dark:bg-base-800': openUserLinks}">
+        {% with avatar_url=request.user.avatar_url %}
+            <div class="bg-white bg-cover h-[38px] flex items-center justify-center rounded-default select-none shadow w-[38px] dark:bg-white/[.06]" {% if avatar_url %}style="background-image: url('{{ avatar_url }}');"{% endif %}>
+                {% if not avatar_url %}
+                    <span class="material-symbols-outlined text-base-400 dark:text-base-500">person</span>
+                {% endif %}
+            </div>
+        {% endwith %}
+
+
+        <div class="flex flex-col gap-1.5 select-none">
+            <div class="font-semibold leading-none text-important tracking-tight">{{ user.get_full_name }}</div>
+
+            {% if user.email %}
+                <div class="font-normal leading-none text-subtle text-xs">{{ user.email }}</div>
+            {% endif %}
+        </div>
+
+        <span class="material-symbols-outlined ml-auto select-none text-font-default-light dark:text-font-default-dark">
+            unfold_more
+        </span>
+    </div>
+</div>

src/unfold/templates/unfold/helpers/popup_header.html

@@ -21,7 +21,7 @@ <h1 class="font-semibold overflow-hidden my-6 text-ellipsis whitespace-nowrap te
         </h1>
 
         <div class="ml-auto">
-            {% include "unfold/helpers/add_link.html" with hide_separator=True %}
+            {% include "unfold/helpers/add_link.html" %}
         </div>
     </div>
 {% endif %}

src/unfold/templates/unfold/helpers/site_icon.html

@@ -18,13 +18,13 @@
     </{% if site_dropdown %}span{% else %}a{% endif %}>
 {% endif %}
 
-<div class="flex flex-col gap-0.5 grow justify-center min-w-0">
-    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
+<div class="flex flex-col gap-1.5 grow justify-center min-w-0">
+    <div class="text-important leading-none tracking-tight *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
         {{ branding }}
     </div>
 
     {% if site_subheader %}
-        <div class="font-normal text-font-subtle-light text-xs dark:text-font-subtle-dark">
+        <div class="font-normal leading-none text-subtle text-xs">
             {{ site_subheader }}
         </div>
     {% endif %}

src/unfold/templates/unfold/helpers/tab_actions.html

@@ -1,21 +1,31 @@
+{% load unfold %}
+
 {% if actions_list or actions_detail or actions_items or nav_global %}
-    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-0 md:mt-0 max-md:w-full">
-        {% if not actions_list_hide_default and not actions_detail_hide_default %}
-            {% if actions_items %}
-                {{ actions_items }}
-            {% endif %}
+    <div class="flex flex-row items-center ml-auto" x-data="{ showActions: false }" x-on:click.outside="showActions = false">
+        {% component "unfold/components/button.html" with href="#" variant="default" class="!px-0 w-[38px] lg:hidden" extra_attrs="x-on:click='showActions = !showActions'" %}
+            <span class="material-symbols-outlined">more_horiz</span>
+        {% endcomponent %}
 
-            {% if nav_global %}
-                {{ nav_global }}
+        <ul class="bg-white container hidden flex-col font-medium mx-auto left-0 right-0 lg:flex lg:flex-row lg:mb-0 lg:mt-0 max-lg:absolute max-lg:top-16" x-bind:class="{'max-lg:flex': showActions}">
+            {% if not actions_list_hide_default and not actions_detail_hide_default %}
+                {% if actions_items %}
+                    {{ actions_items }}
+                {% endif %}
+
+                {% if nav_global %}
+                    {{ nav_global }}
+                {% endif %}
             {% endif %}
-        {% endif %}
 
-        {% for action in actions_list %}
-            {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
-        {% endfor %}
+            {% for action in actions_list %}
+                {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
+            {% endfor %}
+
+            {% for action in actions_detail %}
+                {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
+            {% endfor %}
+        </ul>
 
-        {% for action in actions_detail %}
-            {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
-        {% endfor %}
-    </ul>
+        <span class="block bg-base-200 h-5 mx-4 w-px dark:bg-base-700"></span>
+    </div>
 {% endif %}

src/unfold/templates/unfold/helpers/tab_list.html

@@ -1,11 +1,6 @@
 {% load i18n %}
-
-{% if not is_popup %}
-    {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
-        <div id="tabs-wrapper" class="flex items-start flex-col mb-4 md:flex-row md:items-center">
-            {% include "unfold/helpers/tab_items.html" %}
-
-            {% include "unfold/helpers/tab_actions.html" %}
-        </div>
-    {% endif %}
+{% if not is_popup and tabs_list%}
+    <div id="tabs-wrapper" class="flex items-start flex-col mb-4 md:flex-row md:items-center">
+        {% include "unfold/helpers/tab_items.html" %}
+    </div>
 {% endif %}

src/unfold/templates/unfold/helpers/theme_switch.html

@@ -1,34 +1,26 @@
 {% load i18n %}
 
 {% if not theme %}
-    <div class="relative" x-data="{ openTheme: false }">
-        <a class="block cursor-pointer h-[18px] leading-none hover:text-base-700 dark:hover:text-base-200" x-on:click="openTheme = !openTheme">
-            <span class="material-symbols-outlined">
-                <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
-            </span>
+    <div class="border-b border-base-200 flex flex-row gap-1 mb-1 pb-1 px-2 dark:border-base-700">
+        <a class="cursor-pointer flex flex-row grow px-2 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+           x-on:click="adminTheme = 'light'"
+           x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
+            <span class="material-symbols-outlined mr-2">light_mode</span>
+            <span class="leading-none self-center">{% trans "Light" %}</span>
         </a>
 
-        <nav class="absolute bg-white border border-base-200 flex flex-col leading-none py-1 -right-2 rounded-default shadow-lg top-7 w-40 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openTheme" x-transition x-on:click.outside="openTheme = false">
-            <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
-               x-on:click="adminTheme = 'dark'"
-               x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
-                <span class="material-symbols-outlined mr-2">dark_mode</span>
-                <span class="leading-none self-center">{% trans "Dark" %}</span>
-            </a>
-
-            <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
-               x-on:click="adminTheme = 'light'"
-               x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
-                <span class="material-symbols-outlined mr-2">light_mode</span>
-                <span class="leading-none self-center">{% trans "Light" %}</span>
-            </a>
+        <a class="cursor-pointer flex flex-row grow leading-none -ml-1 px-2 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+           x-on:click="adminTheme = 'dark'"
+           x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
+            <span class="material-symbols-outlined mr-2">dark_mode</span>
+            <span class="leading-none self-center">{% trans "Dark" %}</span>
+        </a>
 
-            <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
-               x-on:click="adminTheme = 'auto'"
-               x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
-                <span class="material-symbols-outlined mr-2">computer</span>
-                <span class="leading-none self-center">{% trans "System" %}</span>
-            </a>
-        </nav>
+        <a class="cursor-pointer flex flex-row grow -mr-1 px-2 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
+           x-on:click="adminTheme = 'auto'"
+           x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:text-primary-500! hover:text-primary-600!'">
+            <span class="material-symbols-outlined mr-2">computer</span>
+            <span class="leading-none self-center">{% trans "System" %}</span>
+        </a>
     </div>
 {% endif %}