mscodepl-react-sidebar/dist/mscodepl-react-sidebar.esm.js

compitable with react js and next js.

import React, { useState, createContext, useContext, useEffect } from 'react';
import { CgMenuLeft } from 'react-icons/cg';
import { IoMdExit, IoIosArrowForward, IoIosArrowBack } from 'react-icons/io';
import Gravatar from 'react-gravatar';
import { AiOutlineCloseCircle } from 'react-icons/ai';
import { FiChevronUp, FiChevronDown } from 'react-icons/fi';

var SideBarContext = /*#__PURE__*/createContext({});
/**
 * @description wrape your react router using this sidebarbar wrapper or wrape all component in _App.tsx in next js application
 */
function SidebarWrapper(_ref) {
  var _ref$title = _ref.title,
    title = _ref$title === void 0 ? undefined : _ref$title,
    logoUrl = _ref.logoUrl,
    userName = _ref.userName,
    userEmail = _ref.userEmail,
    _ref$activeStyle = _ref.activeStyle,
    activeStyle = _ref$activeStyle === void 0 ? "fill" : _ref$activeStyle,
    children = _ref.children,
    mobileHeaderContent = _ref.mobileHeaderContent,
    navItems = _ref.navItems,
    onLogOut = _ref.onLogOut,
    _ref$onProfileImgClic = _ref.onProfileImgClick,
    onProfileImgClick = _ref$onProfileImgClic === void 0 ? function () {} : _ref$onProfileImgClic,
    _ref$onLogoClick = _ref.onLogoClick,
    onLogoClick = _ref$onLogoClick === void 0 ? function () {} : _ref$onLogoClick;
  var _useState = useState(false),
    small = _useState[0],
    setSmall = _useState[1];
  return React.createElement(SideBarContext.Provider, {
    value: {
      title: title,
      small: small,
      setSmall: setSmall,
      logoUrl: logoUrl,
      userName: userName,
      userEmail: userEmail,
      activeStyle: activeStyle,
      mobileHeaderContent: mobileHeaderContent,
      navItems: navItems,
      onLogOut: onLogOut,
      onProfileImgClick: onProfileImgClick,
      onLogoClick: onLogoClick
    }
  }, children);
}

function Footer() {
  var _useContext = useContext(SideBarContext),
    small = _useContext.small,
    setSmall = _useContext.setSmall,
    userName = _useContext.userName,
    userEmail = _useContext.userEmail,
    onLogOut = _useContext.onLogOut,
    onProfileImgClick = _useContext.onProfileImgClick;
  return React.createElement("div", {
    className: "rs_user rs-w-full " + (small === true ? "sm:rs-w-[65px]" : "sm:rs-w-[240px]") + " rs-overflow-x-hidden rs-fixed rs-bottom-0 rs-left-0 rs-px-4 rs-py-3 rs-bg-white"
  }, React.createElement("div", {
    className: 'rs-flex rs-gap-2 rs-justify-between rs-items-center'
  }, React.createElement("div", {
    className: "rs-w-8 rs-h-8 rs-cursor-pointer",
    onClick: onProfileImgClick
  }, React.createElement(Gravatar, {
    email: userEmail,
    size: 100,
    rating: "pg",
    className: "rs-rounded-full rs-shadow rs-w-8 rs-h-8 rs-overflow-hidden rs-object-cover"
  })), React.createElement("a", {
    href: "/account",
    className: (small === true ? "rs-hidden" : "rs-block") + " font-bold rs-whitespace-pre-line truncate rs-leading-none " + userName
  }, "Moje Konto"), React.createElement(IoMdExit, {
    onClick: onLogOut,
    className: (small === true ? "rs-hidden" : "rs-block") + " rs-text-3xl rs-rounded rs-bg-slate-200 rs-p-2 rs-cursor-pointer"
  })), small === true && React.createElement(IoIosArrowForward, {
    onClick: function onClick() {
      setSmall(function (old) {
        return !old;
      });
    },
    className: 'rs-my-2 rs-text-3xl rs-rounded rs-bg-slate-200 rs-p-2 rs-cursor-pointer'
  }));
}

function LeftOffCanvas(_ref) {
  var show = _ref.show,
    title = _ref.title,
    setShow = _ref.setShow,
    children = _ref.children;
  var show_class = 'rs-offcanvas rs-offcanvas-end rs-fixed rs-bottom-0 rs-flex rs-flex-col rs-max-w-full rs-bg-white  rs-bg-clip-padding  rs-outline-none rs-transition rs-translate-x-0 rs-duration-300 rs-ease-in-out rs-text-gray-700 rs-top-0 rs-left-0 rs-border-none rs-w-64 md:rs-w-80 rs-shadow-xl rs-z-[1200]';
  var hide_class = 'rs-offcanvas rs-offcanvas-end rs-fixed rs-bottom-0 rs-flex rs-flex-col rs-max-w-full rs-bg-white  rs-bg-clip-padding  rs-outline-none rs-transition -rs-translate-x-full rs-duration-300 rs-ease-in-out rs-text-gray-700 rs-top-0 rs-left-0 rs-border-none rs-w-64 md:rs-w-80 rs-shadow-xl rs-z-[1200]';
  var hide = function hide() {
    setShow(false);
  };
  return React.createElement(React.Fragment, null, React.createElement("div", {
    className: show === true ? show_class : hide_class
  }, React.createElement("div", {
    className: "rs-offcanvas-header rs-flex rs-items-center rs-justify-between rs-p-4"
  }, React.createElement("h5", {
    className: "rs-offcanvas-title rs-mb-0 rs-leading-normal rs-font-semibold rs-uppercase"
  }, title), React.createElement(AiOutlineCloseCircle, {
    onClick: hide,
    className: 'rs-text-2xl rs-cursor-pointer'
  })), React.createElement("hr", null), React.createElement("div", {
    className: "rs-offcanvas-body rs-flex-grow rs-p-4 rs-overflow-y-auto"
  }, children)), React.createElement("div", {
    className: show === true ? "rs-absolute rs-top-0 rs-left-0 rs-bg-black rs-bg-opacity-50 rs-block rs-h-full rs-w-full " : "rs-hidden",
    onClick: hide
  }));
}

function Navs() {
  var _useContext = useContext(SideBarContext),
    navItems = _useContext.navItems,
    small = _useContext.small;
  return React.createElement("ul", {
    className: "rs_menus  " + (small === true ? "sm:rs-mb-[90px]" : "sm:rs-mb-[45px]")
  }, navItems.map(function (Item, idx) {
    return React.createElement("li", {
      key: idx
    }, React.createElement(Item, null));
  }));
}

function MobileSidebar() {
  var _useState = useState(false),
    show = _useState[0],
    setShow = _useState[1];
  var _useContext = useContext(SideBarContext),
    title = _useContext.title,
    logoUrl = _useContext.logoUrl,
    userEmail = _useContext.userEmail,
    onProfileImgClick = _useContext.onProfileImgClick,
    onLogoClick = _useContext.onLogoClick,
    mobileHeaderContent = _useContext.mobileHeaderContent;
  return React.createElement(React.Fragment, null, React.createElement("div", {
    className: 'rs-flex sm:rs-hidden rs-px-5 rs-py-2 rs-bg-white rs-shadow'
  }, React.createElement("div", {
    className: "rs-flex rs-w-full rs-gap-2 rs-justify-start rs-items-center"
  }, React.createElement(CgMenuLeft, {
    className: 'rs-text-3xl rs-cursor-pointer',
    onClick: function onClick() {
      return setShow(true);
    }
  }), React.createElement("img", {
    src: logoUrl,
    className: "rs-w-9 rs-h-9 rs-max-w-full rs-rounded-full rs-cursor-pointer",
    alt: "",
    onClick: onLogoClick
  })), React.createElement("div", {
    className: 'rs-flex justify-end items-center rs-gap-2'
  }, mobileHeaderContent && React.createElement(React.Fragment, null, mobileHeaderContent), React.createElement("div", {
    className: 'rs-w-9 rs-h-9 rs-cursor-pointer rs-flex rs-items-center',
    onClick: onProfileImgClick
  }, React.createElement(Gravatar, {
    email: userEmail,
    size: 100,
    rating: "pg",
    className: "rs-rounded-full rs-shadow rs-w-8 rs-h-8 rs-overflow-hidden rs-object-cover"
  })))), React.createElement(LeftOffCanvas, {
    title: title || 'Options',
    show: show,
    setShow: setShow
  }, React.createElement(Navs, null), React.createElement("div", {
    className: 'rs-py-5'
  }), React.createElement(Footer, null)));
}

function Sidebar() {
  var _useContext = useContext(SideBarContext),
    title = _useContext.title,
    small = _useContext.small,
    setSmall = _useContext.setSmall,
    logoUrl = _useContext.logoUrl,
    onLogoClick = _useContext.onLogoClick;
  return (
    // w-[65px] md:w-[240px]
    React.createElement("div", {
      className: "rs_main_sidebar rs_scrollbar " + (small === true ? "sm:rs-w-[65px]" : "sm:rs-w-[240px]") + " rs-transition-all rs-hidden sm:rs-block rs-bg-white rs-shadow rs-p-4 rs-fixed rs-overflow-x-hidden rs-h-full rs-top-0 rs-left-0"
    }, React.createElement("div", {
      className: "rs-flex rs-gap-2 rs-items-center"
    }, React.createElement("img", {
      src: logoUrl,
      className: "rs-w-10 rs-max-w-full rs-cursor-pointer",
      alt: "",
      onClick: onLogoClick
    }), title && !small && React.createElement("p", {
      className: 'rs-font-bold rs-text-2xl rs-hidden md:rs-block'
    }, title), React.createElement("div", {
      className: "rs-w-full rs-justify-end " + (small === true ? "rs-hidden" : "rs-flex") + "  "
    }, React.createElement(IoIosArrowBack, {
      onClick: function onClick() {
        setSmall(function (old) {
          return !old;
        });
      },
      className: 'rs-text-3xl rs-rounded rs-bg-slate-200 rs-p-2 rs-cursor-pointer'
    }))), React.createElement("hr", {
      className: 'rs-my-2'
    }), React.createElement("div", {
      className: 'rs-flex rs-flex-col '
    }, React.createElement(Navs, null), React.createElement(Footer, null)))
  );
}

function PageWrapper(_ref) {
  var children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? 'rs-p-5' : _ref$className;
  var _useContext = useContext(SideBarContext),
    small = _useContext.small;
  return React.createElement("div", {
    className: "rs-w-full rs-h-full rs-min-h-screen sm:rs-flex"
  }, React.createElement(Sidebar, null), React.createElement(MobileSidebar, null), React.createElement("div", {
    className: "rs-transition-all rs-w-full " + (small === true ? "sm:rs-pl-[65px]" : "sm:rs-pl-[240px]") + " "
  }, React.createElement("div", {
    className: "rs-page-wrapper " + className
  }, children)));
}

var Define = {
  BG: 'rs-bg-slate-100',
  H_BG: 'hover:rs-bg-slate-200',
  BORDER: 'rs-border rs-border-slate-200',
  ROUND: 'rs-rounded-md'
};

var createReactNavLink = function createReactNavLink(MainNavLink, title, to, icon, subMenus) {
  if (subMenus === void 0) {
    subMenus = [];
  }
  return function () {
    var _useContext = useContext(SideBarContext),
      small = _useContext.small,
      activeStyle = _useContext.activeStyle;
    var _useState = useState(false),
      open = _useState[0],
      setOpen = _useState[1];
    // const [subActive, setSubActive] = useState(false)
    var _useState2 = useState(''),
      path = _useState2[0],
      setPath = _useState2[1];
    useEffect(function () {
      setPath(window.location.pathname);
    }, []);
    // const path = typeof window !== "undefined" ? window.location.pathname : ""
    // if submenus are there ....
    //path.split('/')[1] === to.replace('/', '')
    if (subMenus.length > 0) {
      return React.createElement(React.Fragment, null, React.createElement("div", {
        onClick: function onClick() {
          setOpen(function (old) {
            return !old;
          });
        },
        className: "rs_downdown rs-cursor-pointer rs-my-2 " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " rs-flex rs-gap-2 " + Define.H_BG + " rs-justify-between rs-items-center " + (subMenus.map(function (item) {
          return item.to;
        }).includes(path) ? (activeStyle == "fill" ? Define.BG : Define.BORDER) + " " : "")
      }, React.createElement("div", {
        className: "rs-flex rs-gap-2 rs-justify-between rs-items-center"
      }, React.createElement("span", {
        className: "rs_my_icon"
      }, " ", icon), React.createElement("span", {
        className: (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem]"
      }, title)), open === true ? React.createElement(FiChevronUp, null) : React.createElement(FiChevronDown, null)), React.createElement("div", {
        className: (open === true ? "rs-block" : "rs-hidden") + " " + Define.ROUND + " " + (small ? "" : "rs-pl-1")
      }, subMenus.map(function (item, idx) {
        return React.createElement(MainNavLink, {
          key: idx,
          to: item.to,
          className: function className(navinfo) {
            return "rs_dropdown_item " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " rs-flex rs-gap-2 rs-items-center " + Define.H_BG + " " + (navinfo.isActive === true ? Define.BORDER : "");
          }
        }, React.createElement("span", {
          className: "rs_my_icon"
        }, " ", item.icon), React.createElement("span", {
          className: "rs_nav_title " + (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem]"
        }, item.title));
      })));
    }
    return React.createElement(React.Fragment, null, React.createElement(MainNavLink, {
      to: to,
      className: function className(navinfo) {
        return "rs-my-2 " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " " + Define.H_BG + " rs-flex rs-gap-2 rs-items-center " + (navinfo.isActive === true ? (activeStyle == "fill" ? Define.BG : Define.BORDER) + " " : "");
      }
    }, React.createElement("span", {
      className: "rs_my_icon"
    }, icon), React.createElement("span", {
      className: "rs_nav_title " + (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem]"
    }, title)));
  };
};

var createNextNavLink = function createNextNavLink(MainNavLink, title, to, icon, subMenus) {
  if (subMenus === void 0) {
    subMenus = [];
  }
  return function () {
    var _useContext = useContext(SideBarContext),
      small = _useContext.small,
      activeStyle = _useContext.activeStyle;
    var _useState = useState(''),
      path = _useState[0],
      setPath = _useState[1];
    var _useState2 = useState(false),
      open = _useState2[0],
      setOpen = _useState2[1];
    useEffect(function () {
      setPath(window.location.pathname);
    }, []);
    // if submenus are there ....
    if (subMenus.length > 0) {
      return React.createElement(React.Fragment, null, React.createElement("div", {
        onClick: function onClick() {
          setOpen(function (old) {
            return !old;
          });
        },
        className: "rs_downdown rs-cursor-pointer rs-my-2 " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " rs-flex rs-gap-2 " + Define.H_BG + " rs-justify-between rs-items-center " + (subMenus.map(function (item) {
          return item.to;
        }).includes(path) ? (activeStyle == "fill" ? Define.BG : Define.BORDER) + " " : "")
      }, React.createElement("div", {
        className: "rs-flex rs-gap-2 rs-justify-between rs-items-center"
      }, React.createElement("span", {
        className: "rs_my_icon"
      }, icon), React.createElement("span", {
        className: (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem] "
      }, title)), open === true ? React.createElement(FiChevronUp, null) : React.createElement(FiChevronDown, null)), React.createElement("div", {
        className: (open === true ? " rs-block" : "rs-hidden") + "  " + Define.ROUND + " " + (small ? "" : "rs-pl-1")
      }, subMenus.map(function (item, idx) {
        return React.createElement(MainNavLink, {
          key: idx,
          href: item.to
        }, React.createElement("a", {
          className: "rs_dropdown_item " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " rs-flex rs-gap-2 rs-items-center " + Define.H_BG + " " + (path === item.to ? ' rs-border rs-border-slate-200' : '')
        }, React.createElement("span", {
          className: "rs_my_icon"
        }, item.icon), React.createElement("span", {
          className: "rs_nav_title " + (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem] "
        }, item.title)));
      })));
    }
    return React.createElement(React.Fragment, null, React.createElement(MainNavLink, {
      href: to
    }, React.createElement("a", {
      className: "rs-my-2 " + (small ? 'rs-p-[7px]' : 'rs-px-2.5 rs-py-2.5') + " " + Define.ROUND + " " + Define.H_BG + " rs-flex rs-gap-2 rs-items-center " + (path === to ? "" + (activeStyle == "fill" ? Define.BG : Define.BORDER) : "")
    }, React.createElement("span", {
      className: "rs_my_icon"
    }, icon), React.createElement("span", {
      className: "rs_nav_title " + (small === true ? "rs-hidden" : "rs-block") + " rs-text-[0.8rem]"
    }, title))));
  };
};

export { PageWrapper, SidebarWrapper, createNextNavLink, createReactNavLink };
//# sourceMappingURL=mscodepl-react-sidebar.esm.js.map