fix: Enhance cursor pointer for better UX and clean up class formatti…

…ng in sidebar and dropdown components
phac-nml · Mar 6, 2025 · bd08b36 · bd08b36
1 parent 93dc6fe
commit bd08b36
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 34 deletions.
diff --git a/app/components/layout/sidebar/multi_level_menu_component.html.erb b/app/components/layout/sidebar/multi_level_menu_component.html.erb
@@ -3,31 +3,26 @@
   <button
     type="button"
     class="
-      flex
-      w-full
-      items-center
-      mt-1
-      p-3
-      transition-colors
-      ease-in-out
-      delay-75
-      hover:bg-slate-200
-      dark:text-slate-200
-      dark:hover:bg-slate-700
+      flex w-full items-center mt-1 p-3 transition-colors ease-in-out delay-75
+      hover:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-700 cursor-pointer
     "
     aria-controls="<%= control_id %>"
     data-action="collapsible#toggle"
   >
     <%= viral_icon(
       name: icon,
       classes:
-        "shrink-0 w-5 h-5 ml-1 text-slate-800 transition duration-75 group-hover:text-slate-900 dark:text-slate-400 dark:group-hover:text-white"
+        "shrink-0 w-5 h-5 ml-1 text-slate-800 transition duration-75 group-hover:text-slate-900 dark:text-slate-400 dark:group-hover:text-white",
     ) %>
     <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap"><%= title %></span>
     <%= viral_icon(
       name: "chevron_down",
-      classes: class_names('mr-0 w-4 h-4', { 'rotate-180': selectable_pages.include?(current_page) }),
-      "data-collapsible-target": "icon"
+      classes:
+        class_names(
+          "mr-0 w-4 h-4",
+          { "rotate-180": selectable_pages.include?(current_page) },
+        ),
+      "data-collapsible-target": "icon",
     ) %>
   </button>
   <ul
@@ -38,20 +33,10 @@
     <% menu_items.each do |menu_item| %>
       <li class="Layout-Sidebar-MultiLevelMenu__Item">
         <a
-          href=<%= menu_item.url %>
+          href="<%= menu_item.url %>"
           class="
-            flex
-            w-full
-            items-center
-            p-2
-            text-slate-900
-            t
-            delay-75
-            pl-11
-            group
-            hover:bg-slate-200
-            dark:text-white
-            dark:hover:bg-slate-700
+            flex w-full items-center p-2 text-slate-900 t delay-75 pl-11 group
+            hover:bg-slate-200 dark:text-white dark:hover:bg-slate-700
           "
         >
           <%= render Layout::Sidebar::SelectedComponent.new(selected: menu_item.selected) %>

diff --git a/app/components/layout/sidebar_component.html.erb b/app/components/layout/sidebar_component.html.erb
@@ -1,11 +1,17 @@
 <aside
   id="sidebar"
-  class="flex flex-col text-sm border-r sidebar border-slate-200 bg-slate-50 dark:border-slate-950 dark:bg-slate-900"
+  class="
+    flex flex-col text-sm border-r sidebar border-slate-200 bg-slate-50
+    dark:border-slate-950 dark:bg-slate-900
+  "
   aria-label="Sidebar"
 >
   <div class="grow">
     <div
-      class="flex overflow-x-hidden justify-between items-center px-2 whitespace-nowrap bg-slate-200 dark:bg-slate-950"
+      class="
+        flex overflow-x-hidden justify-between items-center px-2 whitespace-nowrap
+        bg-slate-200 dark:bg-slate-950
+      "
       style="height: 50px;"
     >
       <a href="<%= root_path %>" class="whitespace-nowrap">
@@ -18,11 +24,13 @@
         </span>
       </a>
       <div
-        class="flex flex-row shrink-0 justify-end items-center space-x-1 space-y-1"
+        class="
+          flex flex-row shrink-0 justify-end items-center space-x-1 space-y-1
+        "
       >
         <button
           data-action="click->layout#collapse"
-          class="navbar-button"
+          class="navbar-button cursor-pointer"
           aria-label="<%= t(:'general.navbar.collapse.aria_label') %>"
         >
           <%= viral_icon(name: "sidebar", classes: "w-6 h-6") %>
@@ -63,12 +71,19 @@
       data-viral--dropdown-position-value="bottom-start"
     >
       <button
-        class="py-2 w-full rounded-md border transition-colors duration-200 border-slate-400 bg-slate-100 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-950 dark:border-slate-800 dark:text-slate-200"
+        class="
+          py-2 w-full rounded-md border transition-colors duration-200 border-slate-400
+          bg-slate-100 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-950
+          dark:border-slate-800 dark:text-slate-200 cursor-pointer
+        "
         data-viral--dropdown-target='trigger'
       ><%= t(:"general.default_sidebar.goto") %></button>
       <div
         data-viral--dropdown-target="menu"
-        class="hidden z-20 mx-3 w-56 bg-white rounded-lg divide-y shadow-sm divide-slate-100 dark:bg-slate-700"
+        class="
+          hidden z-20 mx-3 w-56 bg-white rounded-lg divide-y shadow-sm divide-slate-100
+          dark:bg-slate-700
+        "
       >
         <h3 class="py-2 pl-4 font-semibold text-slate-900 dark:text-white">
           <%= t(:"general.default_sidebar.title") %>

diff --git a/app/components/viral/dropdown_component.rb b/app/components/viral/dropdown_component.rb
@@ -64,7 +64,7 @@ def system_arguments_for_button
     def system_arguments_for_icon
       {
         classes: class_names(
-          'viral-dropdown--icon',
+          'viral-dropdown--icon cursor-pointer',
           system_arguments[:classes]
         )
       }