django-unfold 0.63.0__py3-none-any.whl → 0.64.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -49,7 +49,7 @@ function searchForm() {
  *************************************************************/
 function searchDropdown() {
   return {
-    openSearchResults: true,
+    openSearchResults: false,
     currentIndex: 0,
     applyShortcut(event) {
       if (
@@ -77,11 +77,151 @@ function searchDropdown() {
         .length;
     },
     selectItem() {
-      const items = document
-        .getElementById("search-results")
-        .querySelectorAll("li");
+      const href = this.items[this.currentIndex - 1].querySelector("a").href;
+      window.location = href;
+    },
+  };
+}
 
-      window.location = items[this.currentIndex - 1].querySelector("a").href;
+/*************************************************************
+ * Search command
+ *************************************************************/
+function searchCommand() {
+  return {
+    el: document.getElementById("command-results"),
+    items: undefined,
+    hasResults: false,
+    openCommandResults: false,
+    currentIndex: 0,
+    commandHistory: JSON.parse(localStorage.getItem("commandHistory") || "[]"),
+    handleOpen() {
+      this.openCommandResults = true;
+      this.toggleBodyOverflow();
+      setTimeout(() => {
+        this.$refs.searchInputCommand.focus();
+      }, 20);
+
+      this.items = document.querySelectorAll("#command-history li");
+    },
+    handleShortcut(event) {
+      if (
+        event.key === "k" &&
+        (event.metaKey || event.ctrlKey) &&
+        document.activeElement.tagName.toLowerCase() !== "input" &&
+        document.activeElement.tagName.toLowerCase() !== "textarea" &&
+        !document.activeElement.isContentEditable
+      ) {
+        event.preventDefault();
+        this.handleOpen();
+      }
+    },
+    handleEscape() {
+      if (this.$refs.searchInputCommand.value === "") {
+        this.toggleBodyOverflow();
+        this.openCommandResults = false;
+        this.el.innerHTML = "";
+        this.items = undefined;
+        this.currentIndex = 0;
+      } else {
+        this.$refs.searchInputCommand.value = "";
+      }
+    },
+    handleContentLoaded(event) {
+      this.items = event.target.querySelectorAll("li");
+      this.currentIndex = 0;
+      this.hasResults = this.items.length > 0;
+
+      if (!this.hasResults) {
+        this.items = document.querySelectorAll("#command-history li");
+      }
+
+      new SimpleBar(event.target);
+    },
+    handleOutsideClick() {
+      this.$refs.searchInputCommand.value = "";
+      this.openCommandResults = false;
+      this.toggleBodyOverflow();
+    },
+    toggleBodyOverflow() {
+      document
+        .getElementsByTagName("body")[0]
+        .classList.toggle("overflow-hidden");
+    },
+    scrollToActiveItem() {
+      const item = this.items[this.currentIndex - 1];
+
+      if (item) {
+        item.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    },
+    nextItem() {
+      if (this.currentIndex < this.items.length) {
+        this.currentIndex++;
+        this.scrollToActiveItem();
+      }
+    },
+    prevItem() {
+      if (this.currentIndex > 1) {
+        this.currentIndex--;
+        this.scrollToActiveItem();
+      }
+    },
+    selectItem(addHistory) {
+      const link = this.items[this.currentIndex - 1].querySelector("a");
+      const data = {
+        title: link.dataset.title,
+        description: link.dataset.description,
+        link: link.href,
+        favorite: false,
+      };
+
+      if (addHistory) {
+        this.addToHistory(data);
+      }
+
+      window.location = link.href;
+    },
+    addToHistory(data) {
+      let commandHistory = JSON.parse(
+        localStorage.getItem("commandHistory") || "[]"
+      );
+
+      for (const [index, item] of commandHistory.entries()) {
+        if (item.link === data.link) {
+          commandHistory.splice(index, 1);
+        }
+      }
+
+      commandHistory.unshift(data);
+      commandHistory = commandHistory.slice(0, 10);
+      this.commandHistory = commandHistory;
+      localStorage.setItem("commandHistory", JSON.stringify(commandHistory));
+    },
+    removeFromHistory(event, index) {
+      event.preventDefault();
+
+      const commandHistory = JSON.parse(
+        localStorage.getItem("commandHistory") || "[]"
+      );
+      commandHistory.splice(index, 1);
+      this.commandHistory = commandHistory;
+      localStorage.setItem("commandHistory", JSON.stringify(commandHistory));
+    },
+    toggleFavorite(event, index) {
+      event.preventDefault();
+
+      const commandHistory = JSON.parse(
+        localStorage.getItem("commandHistory") || "[]"
+      );
+
+      commandHistory[index].favorite = !commandHistory[index].favorite;
+      this.commandHistory = commandHistory.sort(
+        (a, b) => Number(b.favorite) - Number(a.favorite)
+      );
+      localStorage.setItem("commandHistory", JSON.stringify(commandHistory));
     },
   };
 }
@@ -324,9 +464,7 @@ const renderCharts = () => {
       .getPropertyValue("--color-base-300")
       .trim();
 
-    const borderColor = hasDarkClass
-      ? `rgb(${baseColorDark})`
-      : `rgb(${baseColorLight})`;
+    const borderColor = hasDarkClass ? baseColorDark : baseColorLight;
 
     for (const chart of charts) {
       chart.options.scales.x.grid.color = borderColor;
@@ -355,7 +493,7 @@ const renderCharts = () => {
           const color = getComputedStyle(document.documentElement)
             .getPropertyValue(cssVar)
             .trim();
-          dataset[colorProp] = `rgb(${color})`;
+          dataset[colorProp] = color;
         }
       };
 

unfold/styles.css

@@ -35,43 +35,43 @@
 
 @theme {
   --font-sans: 'Inter', sans-serif;
-  --shadow-raised: 0 2px 12px rgb(var(--color-base-300));
-  --shadow-raised-dark: 0 2px 12px rgb(var(--color-base-700));
+  --shadow-raised: 0 2px 12px var(--color-base-300);
+  --shadow-raised-dark: 0 2px 12px var(--color-base-700);
 }
 
 @theme inline{
   --radius-default: var(--border-radius, 6px);
 
-  --color-primary-50: rgb(var(--color-primary-50));
-  --color-primary-100: rgb(var(--color-primary-100));
-  --color-primary-200: rgb(var(--color-primary-200));
-  --color-primary-300: rgb(var(--color-primary-300));
-  --color-primary-400: rgb(var(--color-primary-400));
-  --color-primary-500: rgb(var(--color-primary-500));
-  --color-primary-600: rgb(var(--color-primary-600));
-  --color-primary-700: rgb(var(--color-primary-700));
-  --color-primary-800: rgb(var(--color-primary-800));
-  --color-primary-900: rgb(var(--color-primary-900));
-  --color-primary-950: rgb(var(--color-primary-950));
-
-  --color-base-50: rgb(var(--color-base-50));
-  --color-base-100: rgb(var(--color-base-100));
-  --color-base-200: rgb(var(--color-base-200));
-  --color-base-300: rgb(var(--color-base-300));
-  --color-base-400: rgb(var(--color-base-400));
-  --color-base-500: rgb(var(--color-base-500));
-  --color-base-600: rgb(var(--color-base-600));
-  --color-base-700: rgb(var(--color-base-700));
-  --color-base-800: rgb(var(--color-base-800));
-  --color-base-900: rgb(var(--color-base-900));
-  --color-base-950: rgb(var(--color-base-950));
-
-  --color-font-subtle-light: rgb(var(--color-font-subtle-light));
-  --color-font-subtle-dark: rgb(var(--color-font-subtle-dark));
-  --color-font-default-light: rgb(var(--color-font-default-light));
-  --color-font-default-dark: rgb(var(--color-font-default-dark));
-  --color-font-important-light: rgb(var(--color-font-important-light));
-  --color-font-important-dark: rgb(var(--color-font-important-dark));
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+
+  --color-base-50: var(--color-base-50);
+  --color-base-100: var(--color-base-100);
+  --color-base-200: var(--color-base-200);
+  --color-base-300: var(--color-base-300);
+  --color-base-400: var(--color-base-400);
+  --color-base-500: var(--color-base-500);
+  --color-base-600: var(--color-base-600);
+  --color-base-700: var(--color-base-700);
+  --color-base-800: var(--color-base-800);
+  --color-base-900: var(--color-base-900);
+  --color-base-950: var(--color-base-950);
+
+  --color-font-subtle-light: var(--color-font-subtle-light);
+  --color-font-subtle-dark: var(--color-font-subtle-dark);
+  --color-font-default-light: var(--color-font-default-light);
+  --color-font-default-dark: var(--color-font-default-dark);
+  --color-font-important-light: var(--color-font-important-light);
+  --color-font-important-dark: var(--color-font-important-dark);
 }
 
 @utility field-sizing-content {

unfold/templates/admin/app_index.html

@@ -6,24 +6,6 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ app_label }}{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-12">
-            <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% for app in app_list %}
-                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=app.name|capfirst %}
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
-
 {% block branding %}
     {% include "unfold/helpers/site_branding.html" %}
 {% endblock %}

unfold/templates/admin/auth/user/change_password.html

@@ -2,33 +2,8 @@
 {% load admin_urls i18n static %}
 
 {% block extrastyle %}{{ block.super }}{% endblock %}
-{% block bodyclass %}{{ block.super }} {{ opts.app_label }}-{{ opts.model_name }} change-form{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-12">
-            <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% url 'admin:app_list' app_label=opts.app_label as link %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}
-
-                    {% url opts|admin_urlname:'changelist' as link %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}
-
-                    {% url opts|admin_urlname:'change' original.pk|admin_urlquote as link %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=original|truncatewords:"18" %}
-
-                    {% translate 'Change password' as breadcrumb_name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
+{% block bodyclass %}{{ block.super }} {{ opts.app_label }}-{{ opts.model_name }} change-form{% endblock %}
 
 {% block content %}
     <div id="content-main">

unfold/templates/admin/base.html

@@ -13,22 +13,6 @@
         <div id="main" class="bg-white flex flex-col grow min-w-0 dark:bg-base-900 {% element_classes 'main' %}">
             {% include "unfold/helpers/header.html" %}
 
-            {% if not is_popup %}
-                {% spaceless %}
-                    {% block breadcrumbs %}
-                        <div class="px-4">
-                            <div class="container mb-12 mx-auto -my-3">
-                                <ul class="flex flex-wrap">
-                                    {% url 'admin:index' as link %}
-                                    {% trans 'Home' as name %}
-                                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-                                    {% block custom_breadcrumbs %}{% endblock %}
-                                </ul>
-                            </div>
-                        </div>
-                    {% endblock %}
-                {% endspaceless %}
-            {% endif %}
 
             {% block messages %}
                 <div class="px-4">

unfold/templates/admin/change_form.html

@@ -9,39 +9,6 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-4">
-            <div class="container mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% url 'admin:app_list' app_label=opts.app_label as link %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}
-
-                    {% if has_view_permission %}
-                        {% url opts|admin_urlname:'changelist' as link %}
-                        {% include 'unfold/helpers/breadcrumb_item.html' with link=link  name=opts.verbose_name_plural|capfirst %}
-                    {% else %}
-                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=opts.verbose_name_plural|capfirst %}
-                    {% endif %}
-
-                    {% if add %}
-                        {% blocktranslate trimmed with name=opts.verbose_name asvar breadcrumb_name %}
-                            Add {{ name }}
-                        {% endblocktranslate %}
-
-                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
-                    {% else %}
-                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=original|truncatewords:'18' %}
-                    {% endif %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
 
 {% block nav-global %}{% spaceless %}
     {% if change and not is_popup %}

unfold/templates/admin/change_list.html

@@ -22,25 +22,6 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-4">
-            <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% url 'admin:app_list' app_label=cl.opts.app_label as link %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=cl.opts.app_config.verbose_name %}
-
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=cl.opts.verbose_name_plural|capfirst %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
-
 {% block coltype %}{% endblock %}
 
 {% block nav-global-side %}

unfold/templates/admin/change_list_results.html

@@ -84,8 +84,8 @@
                             <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
                                 data-label="{% trans "Expand row" %}"
                                 x-on:click="rowOpen = !rowOpen">
-                                <div class="absolute bg-primary-600 -bottom-px hidden left-0 top-0 w-0.5 z-10 lg:block" x-show="rowOpen"></div>
-                                <span class="material-symbols-outlined select-none block! -rotate-90 transition-all" x-bind:class="rowOpen && 'rotate-0'">
+                                <div class="absolute bg-primary-600 -bottom-px hidden left-0 top-0 w-0.5 z-[50] lg:block" x-show="rowOpen"></div>
+                                <span class="material-symbols-outlined select-none block! h-[18px] w-[18px] -rotate-90 transition-all" x-bind:class="rowOpen && 'rotate-0'">
                                     expand_more
                                 </span>
                             </td>

unfold/templates/admin/delete_confirmation.html

@@ -9,27 +9,6 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}
 
-{% block breadcrumbs %}
-    <div class="px-4">
-        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
-            <ul class="flex flex-wrap">
-                {% url 'admin:index' as link %}
-                {% trans 'Home' as name %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                {% url 'admin:app_list' app_label=opts.app_label as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}
-
-                {% url opts|admin_urlname:'changelist' as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}
-
-                {% url opts|admin_urlname:'change' object.pk|admin_urlquote as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=object|truncatewords:"18" %}
-            </ul>
-        </div>
-    </div>
-{% endblock %}
-
 {% block content %}
     {% if perms_lacking %}
         <div class="border border-base-200 rounded-default shadow-xs dark:border-base-800">

unfold/templates/admin/delete_selected_confirmation.html

@@ -9,28 +9,6 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation{% endblock %}
 
-{% block breadcrumbs %}
-    <div class="px-4">
-        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
-            <ul class="flex flex-wrap">
-                {% url 'admin:index' as link %}
-                {% trans 'Home' as name %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                {% url 'admin:app_list' app_label=opts.app_label as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}
-
-                {% url opts|admin_urlname:'changelist' as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}
-
-                {% url opts|admin_urlname:'changelist' as link %}
-                {% translate 'Delete multiple objects' as name %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=name %}
-            </ul>
-        </div>
-    </div>
-{% endblock %}
-
 {% block content %}
     {% if perms_lacking %}
         <p class="font-semibold p-4 text-font-important-light dark:text-font-important-dark">

unfold/templates/admin/index.html

@@ -2,8 +2,6 @@
 
 {% load i18n %}
 
-{% block breadcrumbs %}{% endblock %}
-
 {% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
 
 {% block branding %}

unfold/templates/admin/object_history.html

@@ -1,30 +1,6 @@
 {% extends "admin/base_site.html" %}
 {% load i18n admin_urls %}
 
-{% block breadcrumbs %}
-    <div class="px-4">
-        <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex flex-wrap">
-                {% url 'admin:index' as link %}
-                {% trans 'Home' as name %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                {% url 'admin:app_list' app_label=opts.app_label as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}
-
-                {% url opts|admin_urlname:'changelist' as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}
-
-                {% url opts|admin_urlname:'change' object.pk|admin_urlquote as link %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=object|truncatewords:"18" %}
-
-                {% trans 'History' as name %}
-                {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=name %}
-            </ul>
-        </div>
-    </div>
-{% endblock %}
-
 {% block content %}
     {% if action_list %}
         <table class="border-base-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-default lg:shadow-xs lg:dark:border-base-800">

unfold/templates/registration/password_change_done.html

@@ -3,23 +3,6 @@
 
 {% block extrastyle %}{{ block.super }}">{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-12">
-            <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% translate 'Change password' as breadcrumb_name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
-
 {% block content %}
     <div id="content-main">
         <p class="bg-primary-100 mb-8 text-primary-600 px-3 py-3 rounded-default text-sm">

unfold/templates/registration/password_change_form.html

@@ -3,23 +3,6 @@
 
 {% block extrastyle %}{{ block.super }}{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
-        <div class="px-12">
-            <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex flex-wrap">
-                    {% url 'admin:index' as link %}
-                    {% trans 'Home' as name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
-
-                    {% translate 'Change password' as breadcrumb_name %}
-                    {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
-                </ul>
-            </div>
-        </div>
-    {% endblock %}
-{% endif %}
-
 {% block content %}
     <div id="content-main">
         <form{% if form_url %} action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form">{% csrf_token %}{% block form_top %}{% endblock %}

unfold/templates/unfold/components/navigation.html

@@ -1,7 +1,7 @@
 {% if items %}
-    <nav class="bg-base-100 flex gap-2 p-1 rounded-default text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
+    <nav class="bg-base-100 flex gap-1 p-1 rounded-default dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
         {% for item in items %}
-            <a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-1 rounded-default {% if item.active %} bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark{% else %}text-font-subtle-light dark:text-font-subtle-dark hover:bg-base-700/[.04]  dark:hover:bg-white/[.04]{% endif %}">
+            <a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-[5px] rounded-default transition-colors {% if item.active %} bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark{% else %}hover:bg-base-700/[.04] dark:hover:bg-white/[.04]{% endif %}">
                 {% if item.icon %}
                     <span class="material-symbols-outlined{% if item.title %} mr-2{% endif %}">{{ item.icon }}</span>
                 {% endif %}