Add Navbar component

lib/phlexy_ui.rb

@@ -19,6 +19,7 @@ module PhlexyUI
   autoload :Dropdown, "phlexy_ui/dropdown"
   autoload :Menu, "phlexy_ui/menu"
   autoload :SubMenu, "phlexy_ui/menu/sub_menu"
+  autoload :Navbar, "phlexy_ui/navbar"
 end
 
 loader.eager_load

lib/phlexy_ui/navbar.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Navbar < Base
+    def initialize(*, as: :nav, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :navbar,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def start(&)
+      div(class: :"navbar-start", &)
+    end
+
+    def center(&)
+      div(class: :"navbar-center", &)
+    end
+
+    def end(&)
+      div(class: :"navbar-end", &)
+    end
+  end
+end

spec/lib/phlexy_ui/navbar_spec.rb

@@ -0,0 +1,40 @@
+require "spec_helper"
+
+describe PhlexyUI::Navbar do
+  subject(:output) { render described_class.new }
+
+  describe "rendering a full navbar" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Navbar.new do |navbar|
+            navbar.start do
+            end
+
+            navbar.center do
+            end
+
+            navbar.end do
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <nav class="navbar">
+          <div class="navbar-start"></div>
+          <div class="navbar-center"></div>
+          <div class="navbar-end"></div>
+        </nav>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+end