How to make toggle work for hamburger tailwind?

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

1. I want the dropdown to appear only when I click on hamburger but it exists always. Not sure how to get the toggle working.
2. 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>