nexpi-ui/lib/SideBar.js

An elegant and minimalist Next.js 14 component library

"use client";
import { __spreadArray } from "tslib";
import styles from './styles/SideBar.module.css';
import * as Icons from 'react-icons/fa';
import { FaChevronDown, FaChevronUp, FaBars, FaTimes } from 'react-icons/fa';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import Button from './Button';
import React from 'react';
var getIconByName = function (name) {
    var IconComponent = Icons[name];
    return IconComponent || null;
};
var SideBar = function (_a) {
    var style = _a.style, NavItems = _a.NavItems, children = _a.children;
    var _b = useState([]), mouse = _b[0], setMouse = _b[1];
    var _c = useState(false), isMobile = _c[0], setIsMobile = _c[1];
    var _d = useState(false), sidebarVisible = _d[0], setSidebarVisible = _d[1];
    var handleItemClick = function (index) {
        var newMouse = __spreadArray([], mouse, true);
        newMouse[index] = !newMouse[index];
        setMouse(newMouse);
    };
    var handleResize = function () {
        setIsMobile(window.innerWidth <= 768);
    };
    useEffect(function () {
        window.addEventListener('resize', handleResize);
        handleResize();
        return function () {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    var toggleSidebar = function () {
        setSidebarVisible(!sidebarVisible);
    };
    return (React.createElement(React.Fragment, null,
        isMobile && (React.createElement(Button, { variant: 'void', style: { border: 'none' }, onClick: toggleSidebar }, sidebarVisible ? React.createElement(FaTimes, null) : React.createElement(FaBars, null))),
        React.createElement("nav", { style: style, className: "".concat(styles.nav, " ").concat(isMobile ? (sidebarVisible ? styles.navVisible : styles.navHidden) : '') },
            children && React.createElement("div", null, children),
            React.createElement("ul", null, NavItems.map(function (item, index) {
                var IconComponent = (item.icon ? getIconByName(item.icon) : null);
                return (React.createElement("li", { key: index, style: { listStyle: "none" }, onClick: function () {
                        if (item.path === 'child' && item.subItems !== undefined)
                            handleItemClick(index);
                    }, className: item.path === 'child' && item.subItems !== undefined ? styles.parent : styles.li }, item.path !== 'child' ? (React.createElement(Link, { href: item.path },
                    IconComponent && (React.createElement(IconComponent, { style: {
                            marginLeft: "1.5rem",
                            marginRight: "1rem",
                        } })),
                    item.name)) : (React.createElement(React.Fragment, null,
                    IconComponent && (React.createElement(IconComponent, { style: {
                            marginLeft: "1.5rem",
                            marginRight: "1rem",
                        } })),
                    item.name,
                    mouse[index] ? (React.createElement(FaChevronUp, { style: {
                            marginLeft: "1.5rem",
                            marginRight: "1rem",
                        } })) : (React.createElement(FaChevronDown, { style: {
                            marginLeft: "1.5rem",
                            marginRight: "1rem",
                        } })),
                    mouse[index] && item.subItems && item.path === "child" && (React.createElement("ul", { style: { marginTop: '1rem' } }, item.subItems.map(function (subItem, subIndex) {
                        var SubIconComponent = (subItem.icon ? getIconByName(subItem.icon) : null);
                        return subItem.path ? (React.createElement("li", { key: subIndex, style: { listStyle: "none" }, className: styles.li },
                            React.createElement(Link, { href: subItem.path },
                                SubIconComponent && (React.createElement(SubIconComponent, { style: {
                                        marginLeft: "1.5rem",
                                        marginRight: "1rem",
                                    } })),
                                subItem.name))) : null;
                    })))))));
            })))));
};
export default SideBar;
//# sourceMappingURL=SideBar.js.map