Introduce sidebar nav components, settings nav

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