diff --git a/app/components/main_with_sidenav_component.html.erb b/app/components/main_with_sidenav_component.html.erb new file mode 100644 index 0000000..efdc28b --- /dev/null +++ b/app/components/main_with_sidenav_component.html.erb @@ -0,0 +1,15 @@ +
+
+
+ +
+ <%= content %> +
+
+
+
+ diff --git a/app/components/main_with_sidenav_component.rb b/app/components/main_with_sidenav_component.rb new file mode 100644 index 0000000..90fb8c2 --- /dev/null +++ b/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 diff --git a/app/components/sidenav_link_component.html.erb b/app/components/sidenav_link_component.html.erb new file mode 100644 index 0000000..2d27b29 --- /dev/null +++ b/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 } %> + <%= @name %> +<% end %> diff --git a/app/components/sidenav_link_component.rb b/app/components/sidenav_link_component.rb new file mode 100644 index 0000000..999871b --- /dev/null +++ b/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 diff --git a/app/views/icons/_key.html.erb b/app/views/icons/_key.html.erb index e778e74..de4730e 100644 --- a/app/views/icons/_key.html.erb +++ b/app/views/icons/_key.html.erb @@ -1 +1 @@ - \ No newline at end of file + diff --git a/app/views/icons/_settings.html.erb b/app/views/icons/_settings.html.erb index 19c2726..b315869 100644 --- a/app/views/icons/_settings.html.erb +++ b/app/views/icons/_settings.html.erb @@ -1 +1 @@ - \ No newline at end of file + diff --git a/app/views/icons/_shield.html.erb b/app/views/icons/_shield.html.erb index c7c4841..644e1f8 100644 --- a/app/views/icons/_shield.html.erb +++ b/app/views/icons/_shield.html.erb @@ -1 +1 @@ - \ No newline at end of file + diff --git a/app/views/security/index.html.erb b/app/views/security/index.html.erb index 046ff9c..652723c 100644 --- a/app/views/security/index.html.erb +++ b/app/views/security/index.html.erb @@ -1,9 +1,9 @@ -<%= render HeaderComponent.new(title: "Account") %> +<%= render HeaderComponent.new(title: "Settings") %> -<%= render MainSimpleComponent.new do %> +<%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
-

Security

-

Password change

+

Password

+

Use the following button to request an email with a password reset link:

<%= form_with(url: settings_reset_password_path, method: :post) do %> <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray w-full sm:w-auto') %> diff --git a/app/views/shared/_main_nav.html.erb b/app/views/shared/_main_nav.html.erb index 5905646..2e49a05 100644 --- a/app/views/shared/_main_nav.html.erb +++ b/app/views/shared/_main_nav.html.erb @@ -6,5 +6,5 @@ class: main_nav_class(@current_section, :contributions) %> <%= link_to "Wallet", wallet_path, class: main_nav_class(@current_section, :wallet) %> -<%= link_to "Account", security_path, +<%= link_to "Settings", security_path, class: main_nav_class(@current_section, :security) %> diff --git a/app/views/shared/_sidenav_settings.html.erb b/app/views/shared/_sidenav_settings.html.erb new file mode 100644 index 0000000..3239907 --- /dev/null +++ b/app/views/shared/_sidenav_settings.html.erb @@ -0,0 +1,10 @@ +<%= render SidenavLinkComponent.new( + name: "Account", path: "#", icon: "settings", disabled: true +) %> +<%= render SidenavLinkComponent.new( + name: "Password", path: security_path, icon: "key", + active: current_page?(security_path) +) %> +<%= render SidenavLinkComponent.new( + name: "Security", path: "#", icon: "shield", disabled: true +) %>