fix: minor fix on navbar

assets/css/navbar.scss

@@ -1,134 +1,146 @@
 .navbar {
-    @apply flex justify-between items-center;
-    @apply w-full border-black-10 bg-white-100;
-}
-
-.logo {
-    margin-left: 2.5rem;
-    width: 9.75rem;
-    height: 3.125rem;
+  @apply flex justify-between items-center;
+  @apply w-full border-black-10 bg-white-100;
 }
 
 .login-button {
-    margin-right: 2.5rem;
-}
-
-.nav-menu {
-    @apply flex justify-evenly;
-    width: 32rem;
-}
-
-.nav-item {
-    @apply flex justify-between items-center;
-    padding: 1rem 1.5rem;
+  @apply flex;
+  margin-right: 2.5rem;
 }
 
 .navbar.authenticated {
-    @apply border-black-10 flex flex-col items-center w-full;
-
-    padding: 2.5rem;
-    width: $nav-width;
-    overflow: hidden;
-    -webkit-transition: width 0.05s linear;
-    transition: width 0.1s linear;
-    transform: translateZ(0) scale(1, 1);
-    border-right-width: 1px;
-
-    > span {
-        @apply border-black-10 rounded-full;
-
-        border-width: 1.5px;
-        width: 2rem;
-        height: 2rem;
-        position: fixed;
-        padding: 0.5rem;
-        top: 50vh;
-        left: calc($nav-width + 1rem);
-        z-index: 1000;
-
-        > svg {
-            @apply text-blue-100;
-
-            width: 1rem;
-            height: 1rem;
-        }
+  @apply border-black-10 flex flex-col items-center w-full;
+
+  padding-top: 2.5rem;
+  width: $nav-width;
+  overflow: hidden;
+  -webkit-transition: width 0.05s linear;
+  transition: width 0.1s linear;
+  transform: translateZ(0) scale(1, 1);
+  border-right-width: 1px;
+
+  >span {
+    @apply border-black-10 rounded-full;
+
+    border-width: 1.5px;
+    width: 2rem;
+    height: 2rem;
+    position: fixed;
+    padding: 0.5rem;
+    top: 50vh;
+    left: calc($nav-width + 1rem);
+    z-index: 1000;
+
+    >svg {
+      @apply text-blue-100;
+
+      width: 1rem;
+      height: 1rem;
     }
+  }
+
+  .user-info {
+    @apply flex justify-center;
+    margin-top: 12rem;
 
-    .user-info {
-        @apply flex justify-center;
-        margin-top: 12rem;
+    svg {
+      width: 3.75rem;
+      height: 3.75rem;
     }
+  }
 
-    .nav-menu {
-        @apply flex flex-col items-center justify-between;
+  .nav-menu {
+    @apply flex flex-col items-center justify-start;
 
-        height: 26.875rem;
+    height: 26.875rem;
 
-        .nav-item {
-            @apply text-black-60 flex items-center justify-center;
-        }
+    a {
+      @apply flex justify-center;
+
+      .nav-item {
+        @apply flex text-black-60 items-center justify-center;
+
+        padding: 1rem 0.813rem 1rem 0.813rem;
+      }
+    }
+
+    .active svg {
+      @apply text-blue-80;
     }
 
-    .logo {
-        margin-right: 1.5rem;
-        width: 3.75rem;
-        height: 3.875rem;
+    .active svg {
+      @apply text-blue-80;
     }
+  }
+
+  .logo {
+    margin-bottom: 5rem;
+    width: 3.75rem;
+    height: 3.875rem;
+  }
 }
 
 .navbar.authenticated.open {
-    @apply relative bg-white-100 items-center;
-    z-index: 999;
+  @apply relative bg-white-100 items-center;
+  z-index: 999;
 
-    width: 20rem;
+  width: 20rem;
 
-    > span {
-        left: 21rem;
-    }
+  >span {
+    left: 21rem;
+  }
 
-    .user-info {
-        @apply items-center;
+  .user-info {
+    @apply flex justify-center items-center;
 
-        width: max-content;
+    margin-top: auto;
 
-        svg {
-            width: 3.75rem;
-            height: 3.75rem;
-            margin-right: 0.75rem;
-        }
+    svg {
+      width: 3.75rem;
+      height: 3.75rem;
+      margin-right: 0.75rem;
     }
+  }
 
-    .nav-menu {
-        @apply items-start;
-        width: 85%;
+  .nav-menu {
+    @apply flex;
 
-        .nav-item {
-            width: 100%;
-            padding: 1rem 1.5rem;
-            justify-content: left;
+    a {
+      @apply flex;
+      width: 85%;
+      justify-content: flex-start;
+      align-items: center;
+      text-decoration: none;
 
-            a {
-                display: flex;
-                justify-content: center;
-                align-items: center;
+      .nav-item {
+        @apply flex;
 
-                p {
-                    padding: 0.5rem;
-                }
-            }
+        padding: 1rem 1.5rem 1rem 1.5rem;
+        justify-content: center;
+        align-items: center;
 
-            .logo {
-                margin: 0;
-            }
+        p {
+          padding: 0.5rem;
         }
+      }
 
-        .nav-item > svg {
-            margin-right: 0.5rem;
-        }
-    }
+      &:hover {
 
-    .logo {
-        width: 12.25rem;
-        height: 3.8rem;
+        svg,
+        p {
+          @apply text-blue-80;
+        }
+      }
     }
-}
+  }
+
+  .active svg {
+    @apply text-black-60;
+  }
+
+  .logo {
+    margin-bottom: 5rem;
+    width: 12.25rem;
+    height: 3.8rem;
+  }
+}

flake.nix

@@ -31,7 +31,7 @@
           mkShell {
             name = "peapescarte";
             packages = with pkgs;
-              [beam.elixir_1_16 ghostscript zlib postgresql]
+              [beam.elixir_1_16 chromium ghostscript zlib postgresql]
               ++ lib.optional stdenv.isLinux [inotify-tools]
               ++ lib.optional stdenv.isDarwin [
                 darwin.apple_sdk.frameworks.CoreServices

lib/pescarte_web/design_system/authenticated_navbar.ex

@@ -6,6 +6,8 @@ defmodule PescarteWeb.DesignSystem.AuthenticatedNavbar do
 
   attr(:user, Usuario, required: true)
   attr(:open, :boolean, default: nil)
+  attr(:menus, :any, default: [])
+  attr(:current_path, :string)
 
   @impl true
   def render(assigns) do
@@ -21,28 +23,13 @@ defmodule PescarteWeb.DesignSystem.AuthenticatedNavbar do
             <img :if={!@open} src={~p"/images/icon_logo.svg"} class="logo" />
             <img :if={@open} src={~p"/images/pescarte_logo.svg"} class="logo" />
           </li>
-          <li class="nav-item">
-            <DesignSystem.link navigate={~p"/"}>
-              <Lucideicons.home />
-              <.text :if={@open} size="base" color="text-black-60">Home</.text>
-            </DesignSystem.link>
-          </li>
-          <li class="nav-item">
-            <DesignSystem.link navigate={~p"/app/pesquisa/pesquisadores"}>
-              <Lucideicons.users />
-              <.text :if={@open} size="base" color="text-black-60">
-                Pesquisadores
-              </.text>
-            </DesignSystem.link>
-          </li>
-          <li class="nav-item">
-            <DesignSystem.link navigate={~p"/app/pesquisa/relatorios"}>
-              <Lucideicons.file_text />
-              <.text :if={@open} size="base" color="text-black-60">
-                Relatórios
-              </.text>
-            </DesignSystem.link>
-          </li>
+
+          <DesignSystem.link :for={{menu_name, path, icon} <- @menus} navigate={path}>
+            <li class={"nav-item #{if should_activate_menu_item(path, @current_path), do: "active"}"}>
+              <.lucide_icon name={icon} />
+              <.text :if={@open} size="base" color="text-black-60"><%= menu_name %></.text>
+            </li>
+          </DesignSystem.link>
         </ul>
         <div class="user-info">
           <Lucideicons.user class="text-black-60" />
@@ -63,4 +50,18 @@ defmodule PescarteWeb.DesignSystem.AuthenticatedNavbar do
   def handle_event("mouseleave", _, socket) do
     {:noreply, assign(socket, open: false)}
   end
+
+  attr(:name, :atom, required: true)
+
+  def lucide_icon(assigns) do
+    assigns = Map.delete(assigns, :__given__)
+    apply(Lucideicons, assigns.name, [assigns])
+  end
+
+  defp should_activate_menu_item(path, current_path) do
+    case Regex.match?(~r/^#{path}(\/|$)/, current_path) do
+      true -> true
+      false -> false
+    end
+  end
 end

lib/pescarte_web/layouts/authenticated.html.heex

@@ -2,6 +2,8 @@
   <.live_component
     id="auth-navbar"
     user={@current_user}
+    menus={@menus}
+    current_path={@current_path}
     module={PescarteWeb.DesignSystem.AuthenticatedNavbar}
   />
   <main>

lib/pescarte_web/live/navbar.ex

@@ -0,0 +1,20 @@
+defmodule PescarteWeb.NavbarLive do
+  use PescarteWeb, :auth_live_view
+
+  def on_mount(:default, _params, _session, socket) do
+    socket =
+      assign(socket,
+        menus: [
+          {"Home", ~p"/app/pesquisa/perfil", :home},
+          {"Pesquisadores", ~p"/app/pesquisa/pesquisadores", :users},
+          {"Relatórios", ~p"/app/pesquisa/relatorios", :file_text}
+        ]
+      )
+
+    {:cont, attach_hook(socket, :set_menu_path, :handle_params, &manage_active_tabs/3)}
+  end
+
+  defp manage_active_tabs(_params, url, socket) do
+    {:cont, assign(socket, current_path: URI.parse(url).path)}
+  end
+end

lib/pescarte_web/router.ex

@@ -42,13 +42,9 @@ defmodule PescarteWeb.Router do
 
   scope "/app/pesquisa", PescarteWeb.Pesquisa do
     pipe_through(:browser)
-    # pipe_through [:browser, :require_authenticated_user]
 
     live_session :require_authenticated_user,
-      on_mount: [
-        {PescarteWeb.Authentication, :ensure_authenticated},
-        {PescarteWeb.Flash, :flash}
-      ] do
+      on_mount: [PescarteWeb.NavbarLive, {PescarteWeb.Authentication, :ensure_authenticated}] do
       live "/perfil", ProfileLive
       live "/pesquisadores", ListPesquisadorLive
       live "/cadastro", CadastroPesquisadorLive