grangerelixx

How to make toggle work for hamburger tailwind?

I added hamburger feature to my project. Everything seems to work except for two

I want the dropdown to appear only when I click on hamburger but it exists always. Not sure how to get the toggle working.
After selecting an option from the dropdown, I want the dropdown to disappear coz the dropdown occupies half of the page.

I tried to refer this link but the toggle didn’t work. Any suggestions on what needs to be removed or added?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] || "MyApp · Phoenix Framework" %>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </head>
  <body>
    <header>
      <section>
        <div>
          <nav class="bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                  <div class="flex-shrink-0">
                    <img class="h-3 w-300" src="<%= Routes.static_path(@conn, "/images/proj.png") %>" alt="Workflow">
                  </div>
                  <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                      <!-- Current: "bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" -->
                      <%= live_redirect "Flights",
                        to: Routes.flight_index_path(@conn, :index),
                        class: "btn-main-nav"
                      %>

                      <%= live_redirect "Stays",
                        to: Routes.stay_index_path(@conn, :index),
                        class: "btn-main-nav"
                      %>

                      <%= live_redirect "Cars",
                        to: Routes.car_index_path(@conn, :index),
                        class: "btn-main-nav"
                      %>
                    </div>
                  </div>
                </div>
                <%= render "details_menu.html", assigns %>
                <div class="-mr-2 flex md:hidden">
                  <!-- Mobile menu button -->
                  <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!--
                      Heroicon name: outline/menu

                      Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!--
                      Heroicon name: outline/x

                      Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>

            <!-- Mobile menu, show/hide based on menu state. -->
            <div class="sm:hidden" id="mobile-menu">
              <div class="pt-2 pb-4 space-y-1">
                <ul class="">
               <li> <a href="<%= Routes.flight_index_path(@conn, :index) %>" class="border-transparent  text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Flights</a></li>
               <li> <a href="<%= Routes.stay_index_path(@conn, :index) %>" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Stays</a></li>
               <li> <a href="<%= Routes.car_index_path(@conn, :index) %>" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Cars</a></li>
              </ul>
              </div>
            </div>
          </nav>
      </section>
    </header>
    <%= @inner_content %>
  </body>
</html>

1 comment

/phoenix #troubleshooting #html #learning-elixir #liveview #alpinejs

0 2402 1

2021-08-20 04:52:05 UTC

First Post!

andreaseriksson

Did you take the example from Tailwind UI? You need some javascript for this (like AlpineJS) and they have removed the javascript part from their examples but you can inspect the source code on their examples to see how they did it.

Post #2