feat: added component Navbar::Item

app/components/navbar/component.html.erb

@@ -1,10 +1,5 @@
 <section class="sticky left-0 right-0 top-0 z-50 h-[var(--navbar-height)] gap-x-8 items-center border-b bg-surface">
   <div class="container flex items-center gap-x-8 h-full text-sm">
     <%= content %>
-    <nav class="ml-auto flex gap-x-8 items-center">
-      <% right_sections.each do |right| %>
-        <%= right %>
-      <% end %>
-    </nav>
   </div>
 </section>

app/components/navbar/component.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 class Navbar::Component < ApplicationViewComponent
-  renders_many :right_sections
-
   def dark_mode_switch
     render(Navbar::DarkModeSwitch::Component.new)
   end
@@ -14,4 +12,8 @@ def account_selector
   def separator
     render(Navbar::Separator::Component.new)
   end
+
+  def item(**)
+    render(Navbar::Item::Component.new(**))
+  end
 end

app/components/navbar/item/component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to path, class: is_active? ? "font-bold text-primary" : "" do %>
+  <% if icon %><i class="<%= icon %> mr-2"></i><% end %>
+  <%= label || content %>
+<% end %>

app/components/navbar/item/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Navbar::Item::Component < ApplicationViewComponent
+  option :label, optional: true
+  option :icon, optional: true
+  option :path
+  option :active, optional: true, default: false
+
+  def is_active?
+    current_page?(path) || active
+  end
+end

app/components/navbar/item/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Navbar::Item::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

app/views/partials/navigations/_protected.html.erb

@@ -1,14 +1,10 @@
-<%= link_to t(".dashboard"), dashboard_path, class: "font-bold text-primary" %>
+<%= navbar.item(icon: "fa fa-dashboard", label: t(".dashboard"), path: dashboard_path) %>
 
-<% navbar.with_right_section do %>
+<nav class="ml-auto flex gap-x-8 items-center">
   <%= navbar.account_selector if onboarded? %>
-
-  <%= link_to edit_account_path do %>
-    <i class="fa fa-gear"></i>
-  <% end %>
-
+  <%= navbar.item(icon: "fa fa-gear", path: edit_account_path) %>
   <%= navbar.dark_mode_switch %>
   <%= button_to destroy_user_session_path, method: :delete, class: "button" do %>
     <i class="fa fa-sign-out text-rose-400"></i>
   <% end %>
-<% end %>
+</nav>

app/views/partials/navigations/_public.html.erb

@@ -1,11 +1,7 @@
-  <%= link_to "Home", root_path, class: "font-bold text-primary" %>
-  <%= link_to "Features", "#", class: "hover:text-primary" %>
-  <%= link_to "Pricing", "#", class: "hover:text-primary" %>
-  <%= link_to "About us", "#", class: "hover:text-primary" %>
-  <%= link_to "Contact", "#", class: "hover:text-primary" %>
+<%= navbar.item(icon: "fa fa-house", label: t(".home"), path: root_path) %>
 
-  <% navbar.with_right_section do %>
-    <%= link_to "Sign in", new_user_session_path, class: "hover:text-primary" %>
-    <%= link_to "Create account", new_user_registration_path, class: "hover:text-primary" %>
-    <%= navbar.dark_mode_switch %>
-  <% end %>
+<nav class="ml-auto flex gap-x-8 items-center">
+  <%= navbar.item(label: t(".sign_in"), path: new_user_session_path) %>
+  <%= navbar.item(label: t(".register"), path: new_user_registration_path) %>
+  <%= navbar.dark_mode_switch %>
+</nav>

config/locales/kiqr.en.yml

@@ -42,6 +42,10 @@ en:
     navigations:
       protected:
         dashboard: "Dashboard"
+      public:
+        home: "Home"
+        sign_in: "Sign in"
+        register: "Create account"
       settings:
         account_settings: "Account settings"
         user_settings: "Login & security"