Fix Sidebar Menu (#16)

* fix: Update stimulus targets and outlines with the correct information

* feat: Add and register the missing `SidebarController`

This controller was needed since it was being reference in the
`header.rb` file. Because this controller didn't exist, the sidebar menu
couldn't be accessed on mobile devices.

* feat: Build assets after adding `SidebarController`

* feat: Show the color mode controls on sidebar for small screen devices #16

Author: nanafox

app/assets/plutonium.js

@@ -24313,8 +24313,13 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
     }
   };
 
+  // src/js/controllers/sidebar_controller.js
+  var sidebar_controller_default = class extends Controller {
+  };
+
   // src/js/controllers/register_controllers.js
   function register_controllers_default(application2) {
+    application2.register("sidebar", sidebar_controller_default);
     application2.register("resource-header", resource_header_controller_default);
     application2.register("nested-resource-form-fields", nested_resource_form_fields_controller_default);
     application2.register("form", form_controller_default);

app/assets/plutonium.js.map

@@ -44,7 +44,7 @@ def view_template
             class: "bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
             data: {
               controller: "resource-header",
-              header_sidebar_outlet: "#sidebar-navigation"
+              resource_header_sidebar_outlet: "#sidebar-navigation"
             }
           ) do
             div(class: "flex flex-wrap justify-between items-center") do
@@ -70,7 +70,7 @@ def render_brand_section
         # @private
         def render_sidebar_toggle
           button(
-            data_action: "header#toggleDrawer",
+            data_action: "resource-header#toggleDrawer",
             aria_controls: "#sidebar-navigation",
             class: %(p-2 mr-2 text-gray-600 rounded-lg cursor-pointer lg:hidden hover:text-gray-900
                     hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2
@@ -97,11 +97,11 @@ def render_brand
         # Renders the toggle icons for the sidebar button
         # @private
         def render_toggle_icons
-          span(data_header_target: "openIcon") do
+          span(data_resource_header_target: "openIcon") do
             render Phlex::TablerIcons::Menu.new(class: "w-6 h-6")
           end
 
-          span(data_header_target: "closeIcon", class: "hidden", aria_hidden: "true") do
+          span(data_resource_header_target: "closeIcon", class: "hidden", aria_hidden: "true") do
             render Phlex::TablerIcons::X.new(class: "w-6 h-6")
           end
 

app/assets/plutonium.min.js

@@ -24,6 +24,7 @@ def view_template(&)
         # @private
         def render_sidebar_container(&)
           aside(
+            data: {controller: "sidebar"},
             id: "sidebar-navigation",
             aria: {label: "Sidebar Navigation"},
             class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
@@ -43,7 +44,7 @@ def render_content(&)
 
         # @private
         def render_color_mode_controls
-          div(class: "hidden absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full lg:flex bg-white dark:bg-gray-800 z-20 border-r border-gray-200 dark:border-gray-700") do
+          div(class: "absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full flex bg-white dark:bg-gray-800 z-20 border-r border-gray-200 dark:border-gray-700") do
             render ColorModeSelector.new
           end
         end

app/assets/plutonium.min.js.map

@@ -16,9 +16,11 @@ import ResourceTabListController from "./resource_tab_list_controller.js"
 import AttachmentInputController from "./attachment_input_controller.js"
 import AttachmentPreviewController from "./attachment_preview_controller.js"
 import AttachmentPreviewContainerController from "./attachment_preview_container_controller.js"
+import SidebarController from "./sidebar_controller.js"
 
 export default function (application) {
   // Register controllers here
+  application.register("sidebar", SidebarController)
   application.register("resource-header", ResourceHeaderController)
   application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
   application.register("form", FormController)

lib/plutonium/ui/layout/header.rb

@@ -0,0 +1,3 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {}