From f78e904b5f3f16c8b5a064b6a5a9ed466c814459 Mon Sep 17 00:00:00 2001 From: douglastofoli Date: Mon, 26 Aug 2024 11:40:34 -0300 Subject: [PATCH 01/16] add hamburger menu --- assets/css/navbar.scss | 8 ++- lib/pescarte_web/design_system/navbar.ex | 86 +++++++++++++++++++++++- 2 files changed, 91 insertions(+), 3 deletions(-) diff --git a/assets/css/navbar.scss b/assets/css/navbar.scss index 8f447435..28d3584e 100644 --- a/assets/css/navbar.scss +++ b/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 md:flex hidden justify-between items-center; gap: 3rem; margin: 21px 0; diff --git a/lib/pescarte_web/design_system/navbar.ex b/lib/pescarte_web/design_system/navbar.ex index ce088631..5cae3c1d 100644 --- a/lib/pescarte_web/design_system/navbar.ex +++ b/lib/pescarte_web/design_system/navbar.ex @@ -1,6 +1,8 @@ defmodule PescarteWeb.DesignSystem.Navbar do use PescarteWeb, :component + alias Phoenix.LiveView.JS + attr :current_path, :string, default: "" @doc """ @@ -11,8 +13,12 @@ defmodule PescarteWeb.DesignSystem.Navbar do """ end @@ -46,4 +54,80 @@ defmodule PescarteWeb.DesignSystem.Navbar do """ end + + defp hamburger_button(assigns) do + ~H""" +
+ +
+ """ + end + + defp open_hamburger(assigns) do + ~H""" + + """ + end + + defp show_hamburger(js \\ %JS{}) do + js + |> JS.show( + to: "#hamburger-content", + transition: + {"transition-all transform ease-in-out duration-300", "-translate-x-3/4", "translate-x-0"}, + time: 300, + display: "flex" + ) + |> JS.show( + to: "#hamburger-backdrop", + transition: + {"transition-all transform ease-in-out duration-300", "opacity-0", "opacity-100"} + ) + |> JS.show( + to: "#hamburger-container", + time: 300 + ) + |> JS.add_class("overflow-hidden", to: "body") + end + + defp hide_hamburger(js \\ %JS{}) do + js + |> JS.hide( + to: "#hamburger-backdrop", + transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"} + ) + |> JS.hide( + to: "#hamburger-content", + transition: + {"transition-all transform ease-in duration-200", "translate-x-0", "-translate-x-3/4"} + ) + |> JS.hide(to: "#hamburger-container", transition: {"block", "block", "hidden"}) + |> JS.remove_class("overflow-hidden", to: "body") + end end From a011e2c801271448d43e4ee99da7b51532e682d0 Mon Sep 17 00:00:00 2001 From: douglastofoli Date: Tue, 27 Aug 2024 17:42:28 -0300 Subject: [PATCH 02/16] add hamburger menu --- assets/css/navbar.scss | 24 +++- assets/js/app.js | 4 +- assets/package-lock.json | 16 +-- assets/package.json | 2 +- lib/pescarte_web/design_system/navbar.ex | 151 +++++++++-------------- mix.exs | 4 +- 6 files changed, 96 insertions(+), 105 deletions(-) diff --git a/assets/css/navbar.scss b/assets/css/navbar.scss index 28d3584e..ff58aa2e 100644 --- a/assets/css/navbar.scss +++ b/assets/css/navbar.scss @@ -17,7 +17,7 @@ } .nav-menu { - @apply md:flex hidden justify-between items-center; + @apply justify-between items-center; gap: 3rem; margin: 21px 0; @@ -41,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, diff --git a/assets/js/app.js b/assets/js/app.js index ce48ec1e..1a368306 100644 --- a/assets/js/app.js +++ b/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)) }) }) diff --git a/assets/package-lock.json b/assets/package-lock.json index 69cd2ef6..ca16cc5a 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -22,7 +22,7 @@ "phoenix_live_view": "file:../deps/phoenix_live_view", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", - "topbar": "^1.0.1" + "topbar": "^3.0.0" } }, "../deps/phoenix": { @@ -876,11 +876,11 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -1709,9 +1709,9 @@ } }, "node_modules/topbar": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/topbar/-/topbar-1.0.1.tgz", - "integrity": "sha512-HZqQSMBiG29vcjOrqKCM9iGY/h69G5gQH7ae83ZCPz5uPmbQKwK0sMEqzVDBiu64tWHJ+kk9NApECrF+FAAvRA==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/topbar/-/topbar-3.0.0.tgz", + "integrity": "sha512-mhczD7KfYi1anfoMPKRdl0wPSWiYc0YOK4KyycYs3EaNT15pVVNDG5CtfgZcEBWIPJEdfR7r8K4hTXDD2ECBVQ==" }, "node_modules/ts-interface-checker": { "version": "0.1.13", diff --git a/assets/package.json b/assets/package.json index b24ea46e..4717719b 100644 --- a/assets/package.json +++ b/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" } } diff --git a/lib/pescarte_web/design_system/navbar.ex b/lib/pescarte_web/design_system/navbar.ex index 5cae3c1d..418e140d 100644 --- a/lib/pescarte_web/design_system/navbar.ex +++ b/lib/pescarte_web/design_system/navbar.ex @@ -1,8 +1,6 @@ defmodule PescarteWeb.DesignSystem.Navbar do use PescarteWeb, :component - alias Phoenix.LiveView.JS - attr :current_path, :string, default: "" @doc """ @@ -13,121 +11,92 @@ defmodule PescarteWeb.DesignSystem.Navbar do """ end - attr(:label, :string, required: true) - attr(:navigate, :string, default: "/") attr(:current_path, :string, default: "/") - defp navlink(assigns) do + defp menu(assigns) do ~H""" - - - + + + """ end defp hamburger_button(assigns) do ~H""" -
- +
+ <.button style="link"> + <.icon name={:menu} class="text-blue-100" /> +
""" end - defp open_hamburger(assigns) do + attr(:current_path, :string, default: "/") + + defp hamburger_menu(assigns) do ~H""" -
diff --git a/priv/static/images/landing/cooperativas/banner.webp b/priv/static/images/landing/cooperativas/banner.webp new file mode 100644 index 0000000000000000000000000000000000000000..02ae7f5d415683733c3447a7b03c547a14984c3e GIT binary patch literal 8152 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 literal 0 HcmV?d00001 From d690a4b38937a5abbafc7b456bf2fc7d221db54e Mon Sep 17 00:00:00 2001 From: douglastofoli Date: Fri, 13 Sep 2024 10:57:19 -0300 Subject: [PATCH 09/16] refactor navbar component --- lib/pescarte_web/design_system/navbar.ex | 38 ++++++++---------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/lib/pescarte_web/design_system/navbar.ex b/lib/pescarte_web/design_system/navbar.ex index 9e9782ac..99cc6058 100644 --- a/lib/pescarte_web/design_system/navbar.ex +++ b/lib/pescarte_web/design_system/navbar.ex @@ -18,21 +18,21 @@ defmodule PescarteWeb.DesignSystem.Navbar do <.hamburger_button /> - + <.hamburger_menu /> """ end + defp hamburger_button(assigns) do + ~H""" +
+ <.button style="link"> + <.icon name={:menu} class="text-blue-100" /> + +
+ """ + end + attr(:current_path, :string, default: "/") defp menu(assigns) do @@ -50,25 +50,11 @@ defmodule PescarteWeb.DesignSystem.Navbar do """ end - defp hamburger_button(assigns) do - ~H""" -
- <.button style="link"> - <.icon name={:menu} class="text-blue-100" /> - -
- """ - end - attr(:current_path, :string, default: "/") defp hamburger_menu(assigns) do ~H""" -
+