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

plutonium 0.15.12 → 0.15.14

Files changed (36) 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/generators/pu/rodauth/concerns/configuration.rb +1 -0
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 +2 -0
data/lib/rodauth/features/case_insensitive_login.rb +21 -0
data/lib/rodauth/plugins.rb +1 -0
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 +26 -3

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/generators/pu/rodauth/concerns/configuration.rb CHANGED Viewed

@@ -172,6 +172,7 @@ module Pu
           },
           jwt: {},
           json: {},
+          case_insensitive_login: {default: true},
           internal_request: {default: true}
         }.freeze

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