RubyGems - plutonium - Versions diffs - 0.15.13 → 0.15.14 - Mend

plutonium 0.15.13 → 0.15.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

checksums.yaml +4 -4
data/app/assets/plutonium.css +1 -1
data/app/assets/plutonium.js +155 -4
data/app/assets/plutonium.js.map +4 -4
data/app/assets/plutonium.min.js +8 -8
data/app/assets/plutonium.min.js.map +4 -4
data/app/views/components/resource_header/resource_header_component.rb +1 -1
data/app/views/components/resource_layout/resource_layout_component.html.erb +6 -2
data/app/views/layouts/resource.html.erb +1 -14
data/app/views/layouts/rodauth.html.erb +2 -18
data/app/views/plutonium/_resource_header.html.erb +4 -2
data/app/views/plutonium/_resource_sidebar.html.erb +1 -1
data/docs/public/templates/plutonium.rb +6 -12
data/lib/generators/pu/gem/standard/standard_generator.rb +14 -1
data/lib/generators/pu/lib/plutonium_generators/concerns/actions.rb +1 -1
data/lib/plutonium/ui/color_mode_selector.rb +86 -0
data/lib/plutonium/ui/component/kit.rb +2 -0
data/lib/plutonium/ui/component/methods.rb +2 -0
data/lib/plutonium/ui/dyna_frame/host.rb +2 -2
data/lib/plutonium/ui/layout/base.rb +135 -0
data/lib/plutonium/ui/layout/header.rb +121 -0
data/lib/plutonium/ui/layout/resource_layout.rb +26 -0
data/lib/plutonium/ui/layout/rodauth_layout.rb +34 -0
data/lib/plutonium/ui/layout/sidebar.rb +56 -0
data/lib/plutonium/ui/table/resource.rb +1 -1
data/lib/plutonium/version.rb +1 -1
data/lib/plutonium.rb +1 -1
data/lib/rodauth/features/case_insensitive_login.rb +10 -4
data/package-lock.json +2 -2
data/package.json +1 -1
data/src/js/controllers/header_controller.js +184 -0
data/src/js/controllers/register_controllers.js +4 -2
data/src/js/controllers/{resource_header_controller.js → sidebar_controller.js} +2 -2
metadata +25 -4
/data/lib/rodauth/{loader.rb → plugins.rb} +0 -0

data/app/views/components/resource_header/resource_header_component.rb CHANGED Viewed

@@ -13,7 +13,7 @@ module PlutoniumUi
       # base attributes go here
       {
         classname: "resource-header 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",
-        controller: "resource-header"
+        controller: "header"
       }
     end

data/app/views/components/resource_layout/resource_layout_component.html.erb CHANGED Viewed

@@ -29,10 +29,14 @@
     <%= assets %>
     <%= head %>
-    <%# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <%#
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.css" integrity="sha512-GvqWM4KWH8mbgWIyvwdH8HgjUbyZTXrCq0sjGij9fDNiXz3vJoy3jCcAaWNekH2rJe4hXVWCJKN+bEW8V7AAEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> %>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    %>
   </head>
   <body class="<%= body_classname %>">
     <%= header %>

data/app/views/layouts/resource.html.erb CHANGED Viewed

@@ -1,16 +1,3 @@
-<%= render_component :resource_layout, lang: "en",
-                                        page_title: make_page_title(@page_title) do |layout| %>
-  <% layout.with_favicon do %>
-    <%= resource_favicon_tag %>
-  <% end %>
-  <% layout.with_header do %>
-    <%= render("resource_header", sidebar_toggle: "#{current_engine.dom_id}-drawer") %>
-  <% end %>
-  <% layout.with_sidebar do %>
-    <%= render("resource_sidebar") %>
-  <% end %>
+<%= render Plutonium::UI::Layout::ResourceLayout.new do |layout| %>
   <%= yield %>
 <% end %>

data/app/views/layouts/rodauth.html.erb CHANGED Viewed

@@ -1,19 +1,3 @@
-<%= render_component :resource_layout, page_title: @page_title,
-                                       lang: "en",
-                                       main_classname: "flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0" do |layout| %>
-  <% layout.with_favicon do %>
-    <%= resource_favicon_tag %>
-  <% end %>
-  <%= link_to root_path, class: "flex items-center text-2xl font-semibold text-gray-900 dark:text-white" do %>
-      <%= resource_logo_tag classname: "w-24 h-24 mr-2" %>
-  <% end %>
-  <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-        <%= yield %>
-      </div>
-  </div>
-  <div class="mt-4 flex items-center font-medium text-secondary-600 dark:text-secondary-400 hover:underline">
-    <%= render_icon "outline/home" %>
-    <%= link_to "Home", root_path, class: "font-medium text-secondary-600 dark:text-secondary-400" %>
-  </div>
+<%= render Plutonium::UI::Layout::RodauthLayout.new do |layout| %>
+  <%= yield %>
 <% end %>

data/app/views/plutonium/_resource_header.html.erb CHANGED Viewed

@@ -1,6 +1,8 @@
-<%# locals: (sidebar_toggle:) %>
+<%= render Plutonium::UI::Layout::Header.new do |header| %>
+  <% header.with_brand_logo do %>
+    <%= resource_logo_tag(classname: "mr-3 h-10") %>
+  <% end %>
-<%= render_component :resource_header, sidebar_toggle: do |header| %>
   <% header.with_action do %>
     <%=
       render_component :nav_grid_menu, label: "Apps" do |menu|

data/app/views/plutonium/_resource_sidebar.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= render_component(:sidebar, id: "#{current_engine.dom_id}-drawer") do %>
+<%= render Plutonium::UI::Layout::Sidebar.new do %>
   <%=
     render_component(:sidebar_menu) do |menu|
       menu.with_item(name: "Dashboard", url: root_path, icon: "outline/home")

data/docs/public/templates/plutonium.rb CHANGED Viewed

@@ -1,29 +1,23 @@
 after_bundle do
   # We just installed Rails, let's create a commit
-  git add: "."
-  git commit: %( -m 'initial commit' )
+  git(add: ".") && git(commit: %( -m 'initial commit' ))
   # Run the base install
   rails_command "app:template LOCATION=https://radioactive-labs.github.io/plutonium-core/templates/base.rb"
   # Add development tools
   generate "pu:gem:dotenv"
-  git add: "."
-  git commit: %( -m 'add dotenv' )
+  git(add: ".") && git(commit: %( -m 'add dotenv' ))
   generate "pu:gem:annotate"
-  git add: "."
-  git commit: %( -m 'add annotate' )
+  git(add: ".") && git(commit: %( -m 'add annotate' ))
   generate "pu:gem:standard"
-  git add: "."
-  git commit: %( -m 'add standardrb' )
+  git(add: ".") && git(commit: %( -m 'add standardrb' ))
   generate "pu:gem:letter_opener"
-  git add: "."
-  git commit: %( -m 'add letter_opener' )
+  git(add: ".") && git(commit: %( -m 'add letter_opener' ))
   generate "pu:core:assets"
-  git add: "."
-  git commit: %( -m 'integrate assets' )
+  git(add: ".") && git(commit: %( -m 'integrate assets' ))
 end

data/lib/generators/pu/gem/standard/standard_generator.rb CHANGED Viewed

@@ -10,10 +10,23 @@ module Pu
       desc "Set up standardrb"
       def start
-        bundle "standard", version: ">= 1.35.1"
+        add_standard
+        remove_rubocop_rails_omakase
       rescue => e
         exception "#{self.class} failed:", e
       end
+      private
+      def add_standard
+        bundle "standard", version: ">= 1.35.1", group: :development
+      end
+      def remove_rubocop_rails_omakase
+        run "bundle remove rubocop-rails-omakase"
+        gsub_file "Gemfile", /\n.*\n.*# Omakase Ruby styling.*/, ""
+        remove_file ".rubocop.yml"
+      end
     end
   end
 end

data/lib/generators/pu/lib/plutonium_generators/concerns/actions.rb CHANGED Viewed

@@ -500,7 +500,7 @@ module PlutoniumGenerators
       def hash_to_cli_options(hash)
         hash.map do |key, value|
           formatted_value = value.is_a?(Array) ? value.join(",") : value
-          "--#{key.to_s.tr("_", "-")}=#{formatted_value}"
+          "--#{key.to_s.tr("_", "-")}=\"#{formatted_value}\""
         end.join(" ")
       end
     end

data/lib/plutonium/ui/color_mode_selector.rb ADDED Viewed

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+module Plutonium
+  module UI
+    # Component for selecting color mode (light/dark/system)
+    # @example Basic usage
+    #   render ColorModeSelector.new
+    class ColorModeSelector < Plutonium::UI::Component::Base
+      # Common CSS classes used across the component
+      COMMON_CLASSES = {
+        button: "w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600",
+        icon: "w-6 h-6 text-gray-800 dark:text-white",
+        trigger: "inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600",
+        dropdown: "hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+      }.freeze
+      # Available color modes with their associated icons and actions
+      COLOR_MODES = [
+        {label: "Light", icon: Phlex::TablerIcons::Sun, action: "setLightColorMode"},
+        {label: "Dark", icon: Phlex::TablerIcons::Moon, action: "setDarkColorMode"},
+        {label: "System", icon: Phlex::TablerIcons::DeviceDesktop, action: "setSystemColorMode"}
+      ].freeze
+      # Renders the color mode selector
+      # @return [void]
+      def template
+        div(data_controller: "resource-drop-down") do
+          render_dropdown_trigger
+          render_dropdown_menu
+        end
+      end
+      private
+      # @private
+      def render_dropdown_trigger
+        button(
+          type: "button",
+          data_resource_drop_down_target: "trigger",
+          class: COMMON_CLASSES[:trigger]
+        ) do
+          render Phlex::TablerIcons::Adjustments.new(class: COMMON_CLASSES[:icon])
+        end
+      end
+      # @private
+      def render_dropdown_menu
+        div(
+          class: COMMON_CLASSES[:dropdown],
+          data_resource_drop_down_target: "menu"
+        ) do
+          render_color_mode_options
+        end
+      end
+      # @private
+      def render_color_mode_options
+        ul(class: "py-1", role: "none") do
+          COLOR_MODES.each do |mode|
+            render_color_mode_button(**mode)
+          end
+        end
+      end
+      # @private
+      # @param label [String] The text label for the button
+      # @param icon [Class] The TablerIcon class to render
+      # @param action [String] The color-mode controller action to trigger
+      def render_color_mode_button(label:, icon:, action:)
+        li do
+          button(
+            type: "button",
+            class: COMMON_CLASSES[:button],
+            role: "menuitem",
+            data_action: "click->color-mode##{action}"
+          ) do
+            div(class: "flex justify-start") do
+              render icon.new(class: COMMON_CLASSES[:icon])
+              plain " #{label}"
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/component/kit.rb CHANGED Viewed

@@ -35,6 +35,8 @@ module Plutonium
         def TableInfo(...) = render Plutonium::UI::Table::Components::PagyInfo.new(...)
         def TablePagination(...) = render Plutonium::UI::Table::Components::PagyPagination.new(...)
+        def ColorModeSelector(...) = render Plutonium::UI::ColorModeSelector.new(...)
       end
     end
   end

data/lib/plutonium/ui/component/methods.rb CHANGED Viewed

@@ -45,9 +45,11 @@ module Plutonium
           :current_policy,
           :current_turbo_frame,
           :current_interactive_action,
+          :current_engine,
           :policy_for,
           :allowed_to?,
           :registered_resources,
+          :root_path,
           to: :helpers
       end
     end

data/lib/plutonium/ui/dyna_frame/host.rb CHANGED Viewed

@@ -4,8 +4,8 @@ module Plutonium
       class Host < Plutonium::UI::Component::Base
         include Phlex::Rails::Helpers::TurboFrameTag
-        def initialize(src:, loading:, id: SecureRandom.hex, **attributes)
-          @id = id
+        def initialize(src:, loading:, **attributes)
+          @id = attributes.delete(:id) || SecureRandom.alphanumeric(8, chars: [*"a".."z"])
           @src = src
           @loading = loading
           @attributes = attributes

data/lib/plutonium/ui/layout/base.rb ADDED Viewed

@@ -0,0 +1,135 @@
+module Plutonium
+  module UI
+    module Layout
+      class Base < Plutonium::UI::Component::Base
+        include Plutonium::Helpers::AssetsHelper
+        include Phlex::Rails::Helpers::CSPMetaTag
+        include Phlex::Rails::Helpers::CSRFMetaTags
+        include Phlex::Rails::Helpers::FaviconLinkTag
+        include Phlex::Rails::Helpers::StyleSheetLinkTag
+        include Phlex::Rails::Helpers::JavaScriptIncludeTag
+        def view_template(&)
+          doctype
+          html(**html_attributes) {
+            render_head
+            render_body(&)
+          }
+        end
+        private
+        def lang = nil
+        def page_title = helpers.controller.instance_variable_get(:@page_title)
+        def html_attributes = {lang:, data_controller: "resource-layout color-mode"}
+        def body_attributes = {class: "antialiased min-h-screen bg-gray-50 dark:bg-gray-900"}
+        def main_attributes = {class: "p-4 min-h-screen"}
+        def render_head
+          head {
+            render_title
+            render_metatags
+            render_security_metatags
+            render_turbo_metatags
+            render_font_tags
+            render_favicon_tag
+            render_assets_tags
+            # plain assets
+            # plain head
+            # <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> '
+            # <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            # <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.css" integrity="sha512-GvqWM4KWH8mbgWIyvwdH8HgjUbyZTXrCq0sjGij9fDNiXz3vJoy3jCcAaWNekH2rJe4hXVWCJKN+bEW8V7AAEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+            # <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+          }
+        end
+        def render_body(&)
+          body(**body_attributes) {
+            render_before_main
+            render_main(&)
+            render_after_main
+          }
+        end
+        def render_before_main
+        end
+        def render_main(&)
+          main(**main_attributes) {
+            render_flash
+            render_before_content
+            render_content(&)
+            render_after_content
+          }
+        end
+        def render_flash
+          render "flash"
+        end
+        def render_before_content
+        end
+        def render_after_main
+        end
+        def render_content(&)
+          yield if block_given?
+        end
+        def render_after_content
+        end
+        def render_title
+          title { page_title } if page_title
+        end
+        def render_metatags
+          meta(charset: "utf-8")
+          meta(name: "viewport", content: "width=device-width,initial-scale=1")
+        end
+        def render_security_metatags
+          csrf_meta_tags
+          csp_meta_tag
+        end
+        def render_turbo_metatags
+          meta(name: "turbo-cache-control", content: "no-cache")
+          meta(name: "turbo-refresh-method", content: "morph")
+          meta(name: "turbo-refresh-scroll", content: "preserve")
+        end
+        def render_font_tags
+          link(rel: "preconnect", href: "https://fonts.googleapis.com")
+          link(rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true)
+          link(href: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap", rel: "stylesheet")
+        end
+        def render_favicon_tag
+          favicon_link_tag(Plutonium.configuration.assets.favicon)
+        end
+        def render_assets_tags
+          render_asset_style_tags
+          render_asset_scripts_tags
+        end
+        def render_asset_style_tags
+          url = resource_asset_url_for(:css, resource_stylesheet_asset)
+          stylesheet_link_tag(url, "data-turbo-track": "reload")
+        end
+        def render_asset_scripts_tags
+          url = resource_asset_url_for(:js, resource_script_asset)
+          javascript_include_tag(url, "data-turbo-track": "reload", type: "module")
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/header.rb ADDED Viewed

@@ -0,0 +1,121 @@
+require "phlex/slotable"
+module Plutonium
+  module UI
+    module Layout
+      # @class Header
+      # A flexible, responsive header component that can include brand information, navigation elements,
+      # and custom actions.
+      #
+      # @example Basic usage with brand name
+      #   Header.new do |header|
+      #     header.with_brand_name { "My App" }
+      #   end
+      #
+      # @example With brand logo and actions
+      #   Header.new do |header|
+      #     header.with_brand_logo { image_tag("logo.svg") }
+      #     header.with_action { button "Settings" }
+      #   end
+      class Header < Base
+        include Phlex::Slotable
+        include Phlex::Rails::Helpers::Routes
+        # @!method brand_name
+        #   Defines the slot for the brand name content
+        #   @yield The block containing the brand name content
+        slot :brand_name
+        # @!method brand_logo
+        #   Defines the slot for the brand logo content
+        #   @yield The block containing the brand logo content
+        slot :brand_logo
+        # @!method action
+        #   Defines multiple slots for header actions (e.g., buttons, dropdowns)
+        #   @yield The block containing each action's content
+        slot :action, collection: true
+        # Renders the header component with all its configured elements
+        # @note The header is fixed positioned and includes responsive design considerations
+        # @return [void]
+        def view_template
+          nav(
+            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: :header,
+              header_sidebar_outlet: "#sidebar-navigation"
+            }
+          ) do
+            div(class: "flex flex-wrap justify-between items-center") do
+              render_brand_section
+              render_actions if action_slots?
+            end
+          end
+        end
+        private
+        # Renders the left section of the header including sidebar toggle, brand elements,
+        # and any yielded content
+        # @private
+        def render_brand_section
+          div(class: "flex justify-start items-center") do
+            render_sidebar_toggle
+            render_brand if brand_name_slot? || brand_logo_slot?
+          end
+        end
+        # Renders the sidebar toggle button for mobile views
+        # @private
+        def render_sidebar_toggle
+          button(
+            data_action: "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
+                    focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-200
+                    dark:hover:bg-gray-700 dark:hover:text-white)
+          ) do
+            render_toggle_icons
+          end
+        end
+        # Renders the brand section with logo and/or name
+        # @private
+        def render_brand
+          a(href: root_path, class: "flex items-center justify-between md:min-w-60") do
+            render brand_logo_slot if brand_logo_slot?
+            if brand_name_slot?
+              span(class: "self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden xs:block") do
+                render brand_name_slot
+              end
+            end
+          end
+        end
+        # Renders the toggle icons for the sidebar button
+        # @private
+        def render_toggle_icons
+          span(data_header_target: "open") do
+            render Phlex::TablerIcons::Menu.new(class: "w-6 h-6")
+          end
+          span(data_header_target: "close", class: "hidden", aria_hidden: "true") do
+            render Phlex::TablerIcons::X.new(class: "w-6 h-6")
+          end
+          span(class: "sr-only") { "Toggle sidebar" }
+        end
+        # Renders the action buttons section
+        # @private
+        def render_actions
+          div(class: "flex items-center lg:order-2") do
+            action_slots.each { |action| render action }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/resource_layout.rb ADDED Viewed

@@ -0,0 +1,26 @@
+module Plutonium
+  module UI
+    module Layout
+      class ResourceLayout < Base
+        private
+        def main_attributes = mix(super, {
+          class: "pt-20 lg:ml-64"
+        })
+        def page_title
+          helpers.make_page_title(
+            helpers.controller.instance_variable_get(:@page_title)
+          )
+        end
+        def render_before_main
+          super
+          render("resource_header")
+          render("resource_sidebar")
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/rodauth_layout.rb ADDED Viewed

@@ -0,0 +1,34 @@
+module Plutonium
+  module UI
+    module Layout
+      class RodauthLayout < Base
+        include Phlex::Rails::Helpers::LinkTo
+        private
+        def page_title
+          helpers.controller.instance_variable_get(:@page_title)
+        end
+        def main_attributes = mix(super, {
+          class: "flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"
+        })
+        def render_content(&)
+          link_to root_path, class: "flex items-center text-2xl font-semibold text-gray-900 dark:text-white" do
+            helpers.resource_logo_tag classname: "w-24 h-24 mr-2"
+          end
+          div(class: "w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700") {
+            div(class: "p-6 space-y-4 md:space-y-6 sm:p-8", &)
+          }
+          div(class: "mt-4 flex items-center font-medium text-secondary-600 dark:text-secondary-400 hover:underline") {
+            render Phlex::TablerIcons::Home2.new
+            link_to "Home", root_path, class: "font-medium text-secondary-600 dark:text-secondary-400"
+          }
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/sidebar.rb ADDED Viewed

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+module Plutonium
+  module UI
+    module Layout
+      # A sidebar navigation component that provides a responsive layout with light/dark mode toggle
+      # @example Basic usage with navigation content
+      #   render Sidebar.new do
+      #     ...
+      #   end
+      class Sidebar < Base
+        include Phlex::Slotable
+        # Renders the sidebar navigation template
+        # @yield [void] The block containing sidebar content
+        # @return [void]
+        def view_template(&)
+          render_sidebar_container do
+            render_content(&) if block_given?
+            render_color_mode_controls
+          end
+        end
+        private
+        # @private
+        def render_sidebar_container(&)
+          aside(
+            id: "sidebar-navigation",
+            aria: {label: "Sidebar Navigation"},
+            data: {controller: :sidebar},
+            class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
+            &
+          )
+        end
+        # @private
+        def render_content(&)
+          div(
+            id: "sidebar-navigation-content",
+            data: {turbo_permanent: true},
+            class: "overflow-y-auto py-5 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700",
+            &
+          )
+        end
+        # @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
+            render ColorModeSelector.new
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/resource.rb CHANGED Viewed

@@ -94,7 +94,7 @@ module Plutonium
         end
         def render_footer
-          div(class: "sticky dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-50 bg-gray-50 dark:bg-gray-900") {
+          div(class: "lg:sticky lg:dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-gray-50 dark:bg-gray-900") {
             TableInfo(pagy_instance)
             TablePagination(pagy_instance)
           }