Feat/responsive landing/cooperativas

assets/css/navbar.scss

@@ -4,7 +4,11 @@
   height: 98px;
 
   .logo {
-    margin: 24px 0px 24px 100px;
+    margin: 1.5rem 0 1.5rem 6.25rem;
+
+    @media screen and (max-width: 768px) {
+      margin: 1.5rem 1.5rem;
+    }
   }
 
   .login-button {
@@ -13,7 +17,7 @@
   }
 
   .nav-menu {
-    @apply flex justify-between items-center;
+    @apply justify-between items-center;
     gap: 3rem;
     margin: 21px 0;
 
@@ -37,6 +41,28 @@
       }
     }
   }
+
+  .hamburger-button {
+    @apply md:hidden;
+    margin: 1.5rem;
+  }
+}
+
+#navbar {
+  .hamburger-container {
+    @apply absolute;
+    margin: 0 1.5rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+
+    .nav-menu {
+      @apply flex;
+      flex-direction: column;
+      gap: 0.8rem;
+    }
+  }
 }
 
 .arrow-open,

assets/js/app.js

@@ -35,9 +35,9 @@ document.querySelectorAll(`[data-component="navbar-dropdown"]`).forEach(el => {
   dropdown.addEventListener("mouseleave", e => hide());
 });
 
-window.addEventListener("phx:js-exec", ({detail}) => {
+window.addEventListener("phx:js-exec", ({ detail }) => {
   document.querySelectorAll(detail.to).forEach(el => {
-      liveSocket.execJS(el, el.getAttribute(detail.attr))
+    liveSocket.execJS(el, el.getAttribute(detail.attr))
   })
 })
 

assets/package.json

@@ -20,6 +20,6 @@
     "phoenix_live_view": "file:../deps/phoenix_live_view",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "topbar": "^1.0.1"
+    "topbar": "^3.0.0"
   }
 }

lib/pescarte_web/design_system/navbar.ex

@@ -13,24 +13,77 @@ defmodule PescarteWeb.DesignSystem.Navbar do
         <DesignSystem.link navigate="/" styless>
           <img src="/images/pescarte_logo.svg" class="logo" />
         </DesignSystem.link>
-        <ul class="nav-menu">
-          <.navlink label="Sobre" navigate={~p"/sobre"} current_path={@current_path} />
-          <.navlink label="Equipes" navigate={~p"/equipes"} current_path={@current_path} />
-          <.navlink label="Sedes" navigate={~p"/sedes"} current_path={@current_path} />
-          <.navlink label="Cooperativas" navigate={~p"/cooperativas"} current_path={@current_path} />
-          <.navlink label="Contato" navigate={~p"/contato"} current_path={@current_path} />
-        </ul>
-        <PescarteWeb.DesignSystem.link navigate={~p"/acessar"} styless>
-          <.button style="primary" class="login-button">
-            <Lucideicons.log_in class="text-white-100" />
-            <.text size="base" color="text-white-100">Acessar</.text>
-          </.button>
-        </PescarteWeb.DesignSystem.link>
+
+        <.menu />
+
+        <.hamburger_button />
       </nav>
+      <.hamburger_menu current_path={@current_path} />
     </header>
     """
   end
 
+  attr(:current_path, :string, default: "/")
+
+  defp menu(assigns) do
+    ~H"""
+    <ul class="nav-menu hidden md:flex">
+      <.links current_path={@current_path} />
+    </ul>
+
+    <PescarteWeb.DesignSystem.link navigate={~p"/acessar"} styless class="hidden md:flex">
+      <.button style="primary" class="login-button">
+        <.icon name={:log_in} class="text-white-100" />
+        <.text size="base" color="text-white-100">Acessar</.text>
+      </.button>
+    </PescarteWeb.DesignSystem.link>
+    """
+  end
+
+  defp hamburger_button(assigns) do
+    ~H"""
+    <div
+      id="hamburger-button"
+      class="hamburger-button md:hidden"
+      phx-click={JS.toggle(to: "#hamburger-container")}
+    >
+      <.button style="link">
+        <.icon name={:menu} class="text-blue-100" />
+      </.button>
+    </div>
+    """
+  end
+
+  attr(:current_path, :string, default: "/")
+
+  defp hamburger_menu(assigns) do
+    ~H"""
+    <div id="hamburger-container" class="hamburger-container hidden">
+      <ul class="nav-menu md:flex">
+        <.links current_path={@current_path} />
+      </ul>
+
+      <PescarteWeb.DesignSystem.link navigate={~p"/acessar"} styless class="hidden md:flex">
+        <.button style="link" class="login-button">
+          <.text size="h4" color="text-blue-100">Acessar</.text>
+        </.button>
+      </PescarteWeb.DesignSystem.link>
+    </div>
+    """
+  end
+
+  attr(:current_path, :string, default: "/")
+
+  defp links(assigns) do
+    ~H"""
+    <.navlink label="Sobre" navigate={~p"/sobre"} current_path={@current_path} />
+    <.navlink label="Equipes" navigate={~p"/equipes"} current_path={@current_path} />
+    <.navlink label="Sedes" navigate={~p"/sedes"} current_path={@current_path} />
+    <.navlink label="Cooperativas" navigate={~p"/cooperativas"} current_path={@current_path} />
+    <.navlink label="Contato" navigate={~p"/contato"} current_path={@current_path} />
+    """
+  end
+
   attr(:label, :string, required: true)
   attr(:navigate, :string, default: "/")
   attr(:current_path, :string, default: "/")

mix.exs

@@ -47,8 +47,8 @@ defmodule Pescarte.MixProject do
       {:phoenix, "~> 1.7", override: true},
       {:phoenix_ecto, "~> 4.1"},
       {:phoenix_html, "~> 4.0", override: true},
-      {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.20"},
+      {:phoenix_live_reload, "~> 1.5", only: :dev},
+      {:phoenix_live_view, "~> 0.20.17"},
       {:timex, "~> 3.0"},
       {:telemetry_metrics, "~> 0.4"},
       {:telemetry_poller, "~> 0.4"},