Introduce sidebar nav components, settings nav

app/components/main_with_sidenav_component.html.erb

@@ -0,0 +1,15 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow">
+    <div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+      <aside class="py-6 sm:py-8 lg:col-span-3">
+        <nav class="space-y-1">
+          <%= render partial: @sidenav_partial %>
+        </nav>
+      </aside>
+      <div class="lg:col-span-9 px-6 sm:px-12 py-8 sm:pt-10 sm:pb-12">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+</main>
+

app/components/main_with_sidenav_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class MainWithSidenavComponent < ViewComponent::Base
+  def initialize(sidenav_partial:)
+    @sidenav_partial = sidenav_partial
+  end
+end

app/components/sidenav_link_component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to @path, class: @link_class do %>
+  <%= render partial: "icons/#{@icon}", locals: { custom_class: @icon_class } %>
+  <span class="truncate"><%= @name %></span>
+<% end %>

app/components/sidenav_link_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class SidenavLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, icon:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @icon = icon
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+    @icon_class = class_names_icon(path)
+  end
+
+  def class_names_link(path)
+    if @active
+      "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700 group border-l-4 px-4 py-2 flex items-center text-base font-medium" 
+    elsif @disabled
+      "border-transparent text-gray-400 hover:bg-gray-50 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    else
+      "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    end
+  end
+
+  def class_names_icon(path)
+    if @active
+      "text-teal-500 group-hover:text-teal-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    elsif @disabled
+      "text-gray-300 group-hover:text-gray-300 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    else
+      "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    end
+  end
+end