chore: add responsive menu

Author: rogerpinho

assets/js/app.js

@@ -16,6 +16,14 @@ import { Socket } from "phoenix";
 // import NProgress from "nprogress";
 import { LiveSocket } from "phoenix_live_view";
 
+if (document.querySelector("#nav-toggle")) {
+  let navToggle = document.getElementById("nav-toggle")
+  let navContent = document.getElementById("menu")
+  navToggle.addEventListener("click", () => {
+      navContent.classList.toggle("hidden"); 
+  })
+}
+
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");

lib/brasil_em_dados_web/live/admin/posts_live/new.ex

@@ -7,7 +7,6 @@ defmodule BrasilEmDadosWeb.Admin.PostsLive.New do
   @impl true
   def mount(_params, _session, socket) do
     changeset = Blog.change_post(%Post{})
-
     {:ok, assign(socket, changeset: changeset, selected_tags: [])}
   end
 
@@ -25,7 +24,7 @@ defmodule BrasilEmDadosWeb.Admin.PostsLive.New do
   def handle_event("save", %{"post" => post_params}, socket) do
     save_post(socket, post_params)
   end
-
+ 
   @impl true
   def handle_info({:set_tags, selected_tags}, socket) do
     {:noreply, assign(socket, selected_tags: selected_tags)}

lib/brasil_em_dados_web/live/admin/posts_live/new.html.heex

@@ -1,9 +1,6 @@
 <div class="container mx-auto px-6">
   <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">Novo Post</h2>
-   <.form let={f} for={@changeset},
-      id="post-form",
-      phx_change="validate",
-      phx_submit="save" >
+   <.form let={f} for={@changeset}  id="post-form" phx-change="validate" phx-submit="save">
 
       <%= label f, :title, "Titulo", class: "mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300" %>
       <%= text_input f, :title, class: "block w-full mt-1 mb-4 text-lg dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input border-b border-gray-300" %>
@@ -13,12 +10,12 @@
       <%= text_input f, :slug, class: "block w-full mt-1 mb-4 text-lg dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input border-b border-gray-300" %>
       <%= error_tag f, :slug %>
 
-      <%= live_component(@socket, BrasilEmDadosWeb.Admin.PostsLive.TagsComponent, id: :tags) %>
+      <%= live_component(BrasilEmDadosWeb.Admin.PostsLive.TagsComponent, id: :tags) %>
 
       <%= label f, :body, "Texto", class: "mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300" %>
       <%= textarea f, :body, class: "block w-full mt-1 mb-4 text-lg dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input border-b border-gray-300" %>
       <%= error_tag f, :body %>
 
       <%= submit("Salvar", phx_disable_with: "Salvando...", class: "font-bold mt-10 index-1 sm:ml-4 px-8 py-3 sm:py-2 rounded bg-purple-700 text-gray-100 hover:bg-purple-900 transition duration-300 text-center") %>
-    </.form>
+   </.form>
 </div>

lib/brasil_em_dados_web/live/admin/tags_live/new.html.heex

@@ -1,8 +1,8 @@
 <div class="container mx-auto px-6">
   <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">Nova Tag</h2>
-   <.form let={f} for={@changeset},
-      id="tag-form",
-      phx_change="validate",
+   <.form let={f} for={@changeset}
+      id="tag-form"
+      phx_change="validate"
       phx_submit="save">
 
       <%= label f, :name, "Nome", class: "mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300" %>

lib/brasil_em_dados_web/templates/layout/_navigation.html.heex

@@ -1,5 +1,5 @@
 <header
-      class="container mx-auto px-6 bg-white flex flex-wrap items-center lg:py-0 py-2"
+      class="container mx-auto w-full px-6 bg-white flex flex-wrap items-center  py-4"
     >
       <div class="flex-1 flex justify-between items-center">
         <%= live_redirect to: Routes.blog_index_path(@conn, :index), class: "flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" do %>
@@ -10,7 +10,7 @@
         <% end %>
       </div>
 
-      <label for="menu-toggle" class="pointer-cursor lg:hidden block"
+      <label for="nav-toggle" class="pointer-cursor md:hidden block"
         ><svg
           class="fill-current text-gray-900"
           xmlns="http://www.w3.org/2000/svg"
@@ -21,9 +21,9 @@
           <title>menu</title>
           <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg>
       </label>
-      <input class="hidden" type="checkbox" id="menu-toggle" />
+      <input class="hidden" type="checkbox" id="nav-toggle" />
 
-      <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
+      <div class="hidden md:flex md:items-center md:w-auto w-full" id="menu">
         <nav>
           <ul
             class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0"