feat: tabs with URL navigation (#682)

unfoldadmin · Aug 19, 2024 · e8a8e98 · e8a8e98
1 parent 723fdea
commit e8a8e98
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/unfold/templates/unfold/helpers/tab_list.html b/src/unfold/templates/unfold/helpers/tab_list.html
@@ -18,6 +18,7 @@
                     {% if inlines_list %}
                         <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                             <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
+                               href="#general"
                                x-on:click="activeTab = 'general'"
                                x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != 'general'}">
                                 {% trans "General" %}
@@ -27,6 +28,7 @@
                         {% for inline in inlines_list %}
                             <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                                 <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
+                                   href="#{{ inline.opts.verbose_name|slugify }}"
                                    x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'"
                                    x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
                                     {% if inline.formset.max_num == 1 %}

diff --git a/src/unfold/templates/unfold/layouts/skeleton.html b/src/unfold/templates/unfold/layouts/skeleton.html
@@ -68,7 +68,7 @@
     {% endif %}
 </head>
 
-<body class="antialiased bg-white font-sans text-gray-600 text-sm dark:bg-gray-900 dark:text-gray-300 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }">
+<body class="antialiased bg-white font-sans text-gray-600 text-sm dark:bg-gray-900 dark:text-gray-300 {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = window.location.hash?.replace('#', '') || 'general'">
     {% block base %}{% endblock %}
 
     <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>