odin-simple-dropdown/index.js

Simple dropdown menu

import "./style.css"

export default function dropdownMenu(btnTitle, ...elements) {
    const dropdownMenuHTML = document.createElement("div");
    dropdownMenuHTML.classList.add('menu');

    const btn = document.createElement("button");
    btn.setAttribute("type", "button");
    btn.classList.add("btn-dropdown");
    btn.textContent = btnTitle;
    dropdownMenuHTML.append(btn);

    const menuDropdownElement = document.createElement("div");
    menuDropdownElement.classList.add("menu-dropdown", "hidden")

    const ul = document.createElement("ul");
    elements.forEach(element => {
        let li = document.createElement("li");
        li.textContent = element;
        ul.append(li);
    });
    menuDropdownElement.append(ul);
    
    dropdownMenuHTML.append(menuDropdownElement);
    btn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))

    return dropdownMenuHTML;
}