I have a dropdown menu that is supposed to show up when you click on the user profile name but it’s not doing it for some reason. It will only show if I add “aria-expanded=”true”. Can someone help?
This is in my HBS
{{#if signed_in}}
<div class="user-info dropdown" >
<button class="dropdown_toggle" aria-haspopup="true">
{{user_avatar class="user-avatar"}}
{{user_name}}
<span>
<svg xmlns="IMAGELINK" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
</span>
</button>
<div class="dropdown-menu" role="menu" aria-expanded="true">
{{#my_profile role="menuitem"}}{{t 'profile'}}{{/my_profile}}
{{link "requests" role="menuitem"}}
<div class="separator" role="separator"></div>
{{link "sign_out" role="menuitem"}}
</div>
</div>
{{/if}}
This is my script
// Dropdowns
function Dropdown(toggle, menu) {
this.toggle = toggle;
this.menu = menu;
this.menuPlacement = {
top: menu.classList.contains("dropdown-menu-top"),
end: menu.classList.contains("dropdown-menu-end")
};
this.toggle.addEventListener("click", this.clickHandler.bind(this));
this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this));
this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this));
This is my HTML
.dropdown-menu {
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
display: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
left: 0;
margin-top: 1px;
min-width: 170px;
padding: 10px 0;
position: absolute;
text-align: left;
z-index: 1000;
}
[dir="rtl"] .dropdown-menu {
text-align: right;
}
.dropdown-menu[aria-expanded="true"] {
display: block;
}