Add MenuItem private component

So that we can have a more flexible way to render menu items,
e.g. with an automatic h2 title for the menu item.

lib/phlexy_ui/collapsible_sub_menu.rb

@@ -25,9 +25,7 @@ def view_template(&)
         if @items.any?
           ul do
             @items.each do |item|
-              li do
-                render item
-              end
+              render item
             end
           end
         end
@@ -42,12 +40,8 @@ def title(&block)
       end
     end
 
-    def item(&block)
-      @items << block
-    end
-
-    def submenu(*, **, &)
-      @items << self.class.new(*, **, &)
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
     end
 
     private

lib/phlexy_ui/menu.rb

@@ -22,21 +22,19 @@ def title(*, as: :li, **options, &)
       end
     end
 
-    def item(*base_modifiers, **options, &)
-      generate_classes!(
-        modifiers_map: MENU_ITEM_MODIFIERS_MAP,
-        base_modifiers:,
-        options:
-      ).then do |classes|
-        li(class: classes, &)
-      end
+    def item(*, **, &)
+      render MenuItem.new(*, **, &)
     end
 
     def submenu(*base_modifiers, **, &)
       if base_modifiers.include?(:collapsible)
-        render CollapsibleSubMenu.new(*base_modifiers, **, &)
+        li do
+          render CollapsibleSubMenu.new(*base_modifiers, **, &)
+        end
       else
-        render SubMenu.new(*base_modifiers, **, &)
+        li do
+          render SubMenu.new(*base_modifiers, **, &)
+        end
       end
     end
 
@@ -112,20 +110,5 @@ def submenu(*base_modifiers, **, &)
       # "lg:bg-error lg:text-error-content"
       error: "bg-error text-error-content"
     }.freeze
-
-    MENU_ITEM_MODIFIERS_MAP = {
-      # "sm:disabled"
-      # "md:disabled"
-      # "lg:disabled"
-      disabled: "disabled",
-      # "sm:active"
-      # "md:active"
-      # "lg:active"
-      active: "active",
-      # "sm:focus"
-      # "md:focus"
-      # "lg:focus"
-      focus: "focus"
-    }.freeze
   end
 end

lib/phlexy_ui/menu_item.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require "debug"
+
+module PhlexyUI
+  # @private
+  class MenuItem < Base
+    def view_template(&)
+      generate_classes!(
+        modifiers_map: MENU_ITEM_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        li(class: classes, &)
+      end
+    end
+
+    def title(*, **options, &block)
+      generate_classes!(
+        component_html_class: :"menu-title",
+        options:
+      ).then do |classes|
+        h2(class: classes, **options, &block)
+      end
+    end
+
+    def submenu(*base_modifiers, **, &)
+      if base_modifiers.include?(:collapsible)
+        render CollapsibleSubMenu.new(*base_modifiers, **, &)
+      else
+        render SubMenu.new(*base_modifiers, **, &)
+      end
+    end
+
+    private
+
+    MENU_ITEM_MODIFIERS_MAP = {
+      # "sm:disabled"
+      # "md:disabled"
+      # "lg:disabled"
+      disabled: "disabled",
+      # "sm:active"
+      # "md:active"
+      # "lg:active"
+      active: "active",
+      # "sm:focus"
+      # "md:focus"
+      # "lg:focus"
+      focus: "focus"
+    }.freeze
+  end
+end

lib/phlexy_ui/sub_menu.rb

@@ -20,9 +20,7 @@ def view_template(&)
       if @items.any?
         ul do
           @items.each do |item|
-            li do
-              render item
-            end
+            render item
           end
         end
       end
@@ -32,12 +30,8 @@ def title(&block)
       @title = block
     end
 
-    def item(&block)
-      @items << block
-    end
-
-    def submenu(*, **, &)
-      @items << self.class.new(*, **, &)
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
     end
   end
 end