Closed digbyk closed 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
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>
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.
Understood. Thanks for taking the time to reply.
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...
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.