ar-design
Version:
AR Design is a (react | nextjs) ui library.
59 lines (58 loc) • 3.54 kB
JavaScript
"use client";
import React, { useState } from "react";
import "../../../assets/css/components/navigation/menu/styles.css";
import Divider from "../../data-display/divider";
const handleClick = (event) => {
event.stopPropagation();
const target = event.currentTarget;
const childNodes = Array.from(target.childNodes);
const ul = childNodes.filter((child) => child instanceof HTMLUListElement); // UL
const div = childNodes.filter((child) => child instanceof HTMLDivElement); // Item Render
if (ul.length > 0) {
const span = div[0].childNodes[div[0].childNodes.length - 1];
span.classList.toggle("opened");
ul[0].classList.toggle("opened");
}
else {
const selectedItems = document.querySelectorAll(".selected");
selectedItems.forEach((item) => item.classList.remove("selected"));
target.classList.add("selected");
}
};
/**
* Alt menüleri sürekli olarak eklemek için özyinelemeli fonksiyon.
* @param items - Menü öğelerinin dizisi
* @param variant - Menü varyantı, "vertical" veya "horizontal"
* @param type - "group" | "divider" türlerinden birisi olmalıdır.
* @returns Menü yapısını temsil eden iç içe geçmiş liste
*/
const SubMenu = ({ items, variant, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
if (!items)
return null;
return (React.createElement("ul", null,
React.createElement("div", null, items.map((item, index) => {
return (React.createElement("li", { key: index, onClick: handleClick },
React.createElement("div", { className: "item-render" },
React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
item.type === "divider" ? React.createElement(Divider, null) : React.createElement("span", { className: "item" }, item.render),
item.type === "group" && React.createElement("span", { className: "angel-down" })),
item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
}))));
};
const Menu = ({ data, variant = "vertical", ...attributes }) => {
// states
const [selectedMenu, setSelectedMenu] = useState([]);
const [selectedItem, setSelectedItem] = useState(null);
return (React.createElement("nav", { className: "ar-menu", ...attributes },
React.createElement("ul", null,
React.createElement("div", null, data.map((item, index) => {
return (React.createElement("li", { key: index, onClick: handleClick },
React.createElement("div", { className: "item-render" },
React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
item.type === "divider" ? React.createElement(Divider, null) : React.createElement("span", { className: "item" }, item.render),
item.type === "group" && React.createElement("span", { className: "angel-down" })),
item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
})))));
};
Menu.displayName = "Menu";
export default Menu;