Active elements in account menu

apps/block_scout_web/lib/block_scout_web/templates/account/auth/profile.html.eex

@@ -1,18 +1,6 @@
 <section class="container">
   <div class="row">
-    <div class="col-2 mb-3">
-      <ul class="nav flex-column">
-        <li class="nav-item">
-          <a class="dropdown-item acc-link-active fs-14" aria-current="page" href="#">Profile</a>
-        </li>
-        <li class="nav-item">
-          <a class="dropdown-item fs-14" href="<%= watchlist_path(@conn, :show) %>">Watchlist</a>
-        </li>
-        <li class="nav-item">
-          <a class="dropdown-item fs-14" href="<%= tag_address_path(@conn, :index) %>">Address Tags</a>
-        </li>
-      </ul>
-    </div>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :profile %>
     <div class="col-md">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/common/_nav.html.eex

@@ -1,16 +1,16 @@
 <div class="col-2 mb-3">
-  <ul class="nav flex-column">
+ <ul class="nav flex-column nav-pills">
     <li class="nav-item">
-      <a class="dropdown-item fs-14" aria-current="page"  href="<%= auth_path(@conn, :profile) %>">Profile</a>
+      <a class="<%= nav_class(@active_item, :profile) %>" aria-current="page"  href="<%= auth_path(@conn, :profile) %>">Profile</a>
     </li>
     <li class="nav-item">
-      <a class="dropdown-item fs-14" href="<%= watchlist_path(@conn, :show) %>">Watchlist</a>
+      <a class="<%= nav_class(@active_item, :watchlist) %>" href="<%= watchlist_path(@conn, :show) %>">Watchlist</a>
     </li>
     <li class="nav-item">
-      <a class="dropdown-item fs-14" href="<%= tag_address_path(@conn, :index) %>">Address Tags</a>
+      <a class="<%= nav_class(@active_item, :address_tags) %>" href="<%= tag_address_path(@conn, :index) %>">Address Tags</a>
     </li>
     <li class="nav-item">
-      <a class="dropdown-item fs-14" href="<%= tag_transaction_path(@conn, :index) %>">Transaction Tags</a>
+      <a class="<%= nav_class(@active_item, :transaction_tags) %>" href="<%= tag_transaction_path(@conn, :index) %>">Transaction Tags</a>
     </li>
       <li class="nav-item">
       <a class="dropdown-item fs-14" href="<%= api_key_path(@conn, :index) %>"><%= gettext "API keys" %></a>

apps/block_scout_web/lib/block_scout_web/templates/account/tag_address/index.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row"> 
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :address_tags %>
     <div class="col-md">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/tag_address/new.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :address_tags %>
     <div class="col-sm-10">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/tag_transaction/index.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row"> 
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :transaction_tags %>
     <div class="col-md">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/tag_transaction/new.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :transaction_tags %>
     <div class="col-sm-10">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/watchlist/show.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row"> 
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :watchlist %>
     <div class="col-md">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/watchlist_address/edit.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :watchlist %>
     <div class="col-sm-10">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/templates/account/watchlist_address/new.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :watchlist %>
     <div class="col-sm-10">
       <div class="card">
         <div class="card-body" >

apps/block_scout_web/lib/block_scout_web/views/account/common_view.ex

@@ -1,3 +1,11 @@
 defmodule BlockScoutWeb.Account.CommonView do
   use BlockScoutWeb, :view
+
+  def nav_class(active_item, item) do
+    if active_item == item do
+      "dropdown-item active fs-14"
+    else
+      "dropdown-item fs-14"
+    end
+  end
 end