Navbar popup menu doesn't close when going to new route in Vue

digbyk commented 3 years ago

Hi - first up, I love this project. Really easy to incorporate into an existing site and very well documented 👍

One thing I noticed, however, was that in my Vue application, s in the navbar dropdown don't trigger closing the dropdown, so I have had to add workaround code to simulate re-clicking the button, but it's definitely not very elegant...

<div
  id="navDropdown"
  class="dropdown-menu dropdown-menu-right w-200"
  aria-labelledby="navbar-dropdown-toggle-btn-1"
  @click="closeMenu"
>
  ...
</div>

closeMenu: function() {
  const menu = document.getElementById("navDropdown");
  menu.click();
  // menu.firstChild.classList.remove("active"); // This seemed to work too but wasn't sure it was doing everything it needed.
  // menu.classList.remove("show");
},

I wonder if just widening the event.target.matches at https://github.com/halfmoonui/halfmoon/blob/master/js/halfmoon.js#L312 would be better. I'll see if I can get that to work before creating a PR.

halfmoonui commented 3 years ago

Thank you! The dropdown component should work right out of the box with Vue. I assume you are using the npm package, did you call the halfmoon.onDOMContentLoaded() method after your component is loaded? You can read more here: https://www.gethalfmoon.com/docs/download/#using-npm

digbyk commented 3 years ago

Thanks for replying. I've tried various combinations of CDN and require/import, putting the halfmoon.onDOMContentLoaded() in App.vue and the component but nothing seems to work.

I tried starting from square one and creating a clean HTML page with the CDN link that didn't work for anchor links, but then I noticed that even on your site, clicking on the Github stars button, which opens in a new tab, doesn't close the popup. Maybe this is intentional, but it does seem to point to be the same thing.

It's been a long week, so I might be missing the obvious, but here's the barebones with anchor tags and the menu doesn't hide.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Halfmoon test</title>
    <link
      href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="page-wrapper with-navbar">
      <!-- Navbar (immediate child of the page wrapper) -->
      <nav class="navbar">
        <!-- Navbar content (with toggle sidebar button) -->
        <div class="navbar-content">
          <button class="btn btn-action" type="button">
            <i class="fa fa-bars" aria-hidden="true"></i>
            <span class="sr-only">Toggle sidebar</span>
            <!-- sr-only = show only on screen readers -->
          </button>
        </div>
        <!-- Navbar brand -->
        <a href="#" class="navbar-brand">
          <img src="..." alt="..." />
          Brand
        </a>
        <!-- Navbar text -->
        <span class="navbar-text text-monospace">v3.0</span>
        <!-- text-monospace = font-family shifted to monospace -->
        <!-- Navbar nav -->
        <ul class="navbar-nav d-none d-md-flex">
          <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) -->
          <li class="nav-item active">
            <a href="#" class="nav-link">Docs</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Products</a>
          </li>
        </ul>
        <!-- Navbar form (inline form) -->
        <form
          class="form-inline d-none d-md-flex ml-auto"
          action="..."
          method="..."
        >
          <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px), ml-auto = margin-left: auto -->
          <input
            type="text"
            class="form-control"
            placeholder="Email address"
            required="required"
          />
          <button class="btn btn-primary" type="submit">Sign up</button>
        </form>
        <!-- Navbar content (with the dropdown menu) -->
        <div class="navbar-content d-md-none ml-auto">
          <!-- d-md-none = display: none on medium screens and up (width > 768px), ml-auto = margin-left: auto -->
          <div class="dropdown with-arrow">
            <button
              class="btn"
              data-toggle="dropdown"
              type="button"
              id="navbar-dropdown-toggle-btn-1"
            >
              Menu
              <i class="fa fa-angle-down" aria-hidden="true"></i>
            </button>
            <div
              class="dropdown-menu dropdown-menu-right w-200"
              aria-labelledby="navbar-dropdown-toggle-btn-1"
            >
              <!-- w-200 = width: 20rem (200px) -->
              <a href="#" class="dropdown-item">Docs</a>
              <a href="#" class="dropdown-item">Products</a>
              <div class="dropdown-divider"></div>
              <div class="dropdown-content">
                <form action="..." method="...">
                  <div class="form-group">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="Email address"
                      required="required"
                    />
                  </div>
                  <button class="btn btn-primary btn-block" type="submit">
                    Sign up
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- Content wrapper -->
      <div class="content-wrapper">...</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>
  </body>
</html>

halfmoonui commented 3 years ago

Sorry for the late response. I misunderstood what you meant previously. What you are seeing is basically the default expected behavior, i.e. it is intentional. I do realize some other libraries wire up the dropdown menus to close when a link is closed (like Bootstrap), but I feel that paradigm is a bit limited, especially if you want forms and other components inside the menu. The only issue is the one your rightly pointed out - going to a new tab is a bit awkward because the menu stays open. If you are adamant about closing it, I guess you could attach the data-toggle="dropdown" to the link, but I do admit that it's a bit hacky.

digbyk commented 3 years ago

Understood. Thanks for taking the time to reply.

halfmoonui / halfmoon

Navbar popup menu doesn't close when going to new route in Vue #74