40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
|
import "./style.css"
|
||
|
|
|
||
|
|
import { createElement, Menu, X } from 'lucide';
|
||
|
|
|
||
|
|
export default function dropdownMenu(...elements) {
|
||
|
|
const dropdownMenuHTML = document.createElement("div");
|
||
|
|
dropdownMenuHTML.classList.add('menu');
|
||
|
|
|
||
|
|
const btn = document.createElement("button");
|
||
|
|
btn.setAttribute("type", "button");
|
||
|
|
btn.classList.add("btn-menu");
|
||
|
|
const menuIcon = createElement(Menu);
|
||
|
|
btn.append(menuIcon);
|
||
|
|
dropdownMenuHTML.append(btn);
|
||
|
|
|
||
|
|
const menuDropdownElement = document.createElement("div");
|
||
|
|
menuDropdownElement.classList.add("menu-fullscreen", "hidden")
|
||
|
|
|
||
|
|
const ul = document.createElement("ul");
|
||
|
|
elements.forEach(element => {
|
||
|
|
let li = document.createElement("li");
|
||
|
|
li.textContent = element;
|
||
|
|
ul.append(li);
|
||
|
|
});
|
||
|
|
menuDropdownElement.append(ul);
|
||
|
|
|
||
|
|
|
||
|
|
const closeBtn = document.createElement("button");
|
||
|
|
closeBtn.setAttribute("type", "button");
|
||
|
|
closeBtn.classList.add("btn-menu", "close-btn-menu");
|
||
|
|
const closeIcon = createElement(X);
|
||
|
|
closeBtn.append(closeIcon);
|
||
|
|
menuDropdownElement.append(closeBtn);
|
||
|
|
|
||
|
|
dropdownMenuHTML.append(menuDropdownElement);
|
||
|
|
btn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))
|
||
|
|
closeBtn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))
|
||
|
|
|
||
|
|
return dropdownMenuHTML;
|
||
|
|
}
|