page_component.html.erb in spina-2.14.0

- old
+ new
@@ -1,37 +1,50 @@
-<turbo-frame id="page_<%= @page.id %>" data-id="<%= @page.id %>">
+<turbo-frame id="page_<%= page.id %>" data-id="<%= page.id %>" data-controller="<%= 'page-collapse' if has_children? %>">
   <div class="flex items-center border-gray-200 border-b <%= css_class %> bg-opacity-50">
     <% if sortable? %>
       <% if draggable? %>
         <div data-sortable-handle class="p-4 text-gray-300 hover:text-gray-600 cursor-move">
           <%= helpers.heroicon("menu-alt-4", style: :solid, class: "w-4 h-4 -mr-4") %>
         </div>
       <% else %>
         <div class="pl-2">          
-          <%= button_to helpers.spina.sort_one_admin_page_path(@page, direction: "up"), class: "btn btn-default shadow-none border-gray-200 border-b-0 rounded-b-none px-1 h-5 sort-up" do %>
+          <%= button_to helpers.spina.sort_one_admin_page_path(page, direction: "up"), class: "btn btn-default shadow-none border-gray-200 border-b-0 rounded-b-none px-1 h-5 sort-up" do %>
             <%= helpers.heroicon("chevron-up", style: :solid, class: 'w-4 h-4 text-gray-600') %>
           <% end %>
 
-          <%= button_to helpers.spina.sort_one_admin_page_path(@page), class: "btn btn-default shadow-none border-gray-200 rounded-t-none px-1 h-5 sort-down" do %>
+          <%= button_to helpers.spina.sort_one_admin_page_path(page), class: "btn btn-default shadow-none border-gray-200 rounded-t-none px-1 h-5 sort-down" do %>
             <%= helpers.heroicon("chevron-down", style: :solid, class: 'w-4 h-4 text-gray-600') %>
           <% end %>
         </div>
       <% end %>
     <% end %>
     
-    <%= link_to helpers.spina.edit_admin_page_path(@page), class: "block text-spina font-medium text-sm p-4 hover:text-spina-dark", data: {turbo_frame: "_top"} do %>
-      <%= @page.menu_title %>
+    <% if has_children? %>
+      <%= link_to helpers.spina.children_admin_page_path(page, sortable: sortable?, draggable: draggable?), class: "ml-2 -mr-3 px-1 h-7 font-medium rounded-md flex items-center text-spina hover:bg-spina/10 transition transition-bg transform", data: {turbo_frame: "page_#{page.id}_children", page_collapse_target: "button", action: "page-collapse#toggle"} do %>
+        <div data-page-collapse-target="indicator" class="transform transition <%= 'rotate-90' unless collapsed? %>">
+          <%= helpers.heroicon('chevron-right', style: :mini, class: 'w-5 h-5') %>
+        </div>
+      <% end %>
+    <% end %>
+    
+    <%= link_to helpers.spina.edit_admin_page_path(page), class: "text-spina font-medium text-sm p-4 hover:text-spina-dark flex items-center", data: {turbo_frame: "_top"} do %>
+      <%= page.menu_title %>
       
-      <small class="font-normal"><%= label %></small>
+      <small class="font-normal ml-2"><%= label %></small>
     <% end %>
     
     <div class='flex-1'></div>
     <div class="mr-3 flex space-x-2">
-      <%= render Spina::Pages::TranslationsComponent.new(@page) %>
+      <%= render Spina::Pages::TranslationsComponent.new(page) %>
     </div>
 
   </div>
 
-  <% if children.any? %>
-    <%= render Spina::Pages::ListComponent.new(pages: children, sortable: sortable, draggable: draggable) %>
+  <% if has_children? %>
+    <turbo-frame id="page_<%= page.id %>_children" data-page-collapse-target="children" <%= 'hidden' if collapsed? %>>
+      <% unless collapsed? %>
+        <%= render Spina::Pages::ListComponent.new(pages: children, sortable: sortable?, draggable: draggable?) %>
+      <% end %>
+    </turbo-frame>
   <% end %>
-</turbo-frame>
\ No newline at end of file
+</turbo-frame>
+