nexpi-ui/lib/MenuBar.js

An elegant and minimalist Next.js 14 component library

"use client";
import { __assign, __spreadArray } from "tslib";
import styles from './styles/MenuBar.module.css';
import * as Icons from 'react-icons/fa';
import Link from 'next/link';
import { useState } from 'react';
import React from 'react';
import Logo from './Logo';
var getIconByName = function (name) {
    var IconComponent = Icons[name];
    return IconComponent || null;
};
var MenuBar = function (_a) {
    var style = _a.style, NavItems = _a.NavItems, children = _a.children, logoPath = _a.logoPath;
    var _b = useState([]), mouse = _b[0], setMouse = _b[1];
    var handleItemClick = function (index) {
        var newMouse = __spreadArray([], mouse, true);
        newMouse[index] = !newMouse[index];
        setMouse(newMouse);
    };
    return (React.createElement("div", { style: {
            borderBottom: '1px solid var(--nxp-secondary-shadow-color)'
        } },
        React.createElement("nav", { style: __assign(__assign({}, style), { display: 'flex', justifyContent: 'space-between' }), className: styles.nav },
            children && React.createElement("div", null, children),
            React.createElement("ul", null,
                logoPath ? React.createElement(Logo, { alt: 'logo', src: logoPath }) : null,
                NavItems.map(function (item, index) {
                    var IconComponent = (item.icon ? getIconByName(item.icon) : null);
                    return (React.createElement("li", { key: index, className: item.path === 'child' && item.subItems ? styles.parent : styles.li, onClick: function () {
                            if (item.path === 'child' && item.subItems) {
                                handleItemClick(index);
                            }
                        } }, item.path !== 'child' ? (React.createElement(Link, { href: item.path },
                        IconComponent && (React.createElement(IconComponent, { className: styles.icon })),
                        item.name)) : (React.createElement(React.Fragment, null,
                        IconComponent && (React.createElement(IconComponent, { className: styles.icon })),
                        React.createElement("b", null, item.name),
                        mouse[index] && item.subItems && item.path === 'child' && (React.createElement("ul", null, item.subItems.map(function (subItem, subIndex) {
                            var SubIconComponent = (subItem.icon ? getIconByName(subItem.icon) : null);
                            return subItem.path ? (React.createElement("li", { key: subIndex, className: styles.li },
                                React.createElement(Link, { href: subItem.path },
                                    SubIconComponent && (React.createElement(SubIconComponent, { className: styles.icon })),
                                    subItem.name))) : null;
                        })))))));
                })),
            React.createElement("div", null)),
        " "));
};
export default MenuBar;
//# sourceMappingURL=MenuBar.js.map