funuicss 2.6.17 → 2.6.19

package/ui/sidebar/SideBar.js

@@ -45,10 +45,10 @@ var navigation_1 = require("next/navigation");
 var link_1 = __importDefault(require("next/link"));
 function SideBar(_a) {
     var _b;
-    var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.sidebarCss, sidebarCss = _h === void 0 ? '' : _h, activeCss = _a.activeCss, _j = _a.bodyCss, bodyCss = _j === void 0 ? '' : _j, _k = _a.links, links = _k === void 0 ? [] : _k, children = _a.children, onClose = _a.onClose;
-    var _l = (0, react_1.useState)(false), isMobile = _l[0], setIsMobile = _l[1];
-    var _m = (0, react_1.useState)(open), internalOpen = _m[0], setInternalOpen = _m[1];
-    var _o = (0, react_1.useState)('0px'), appBarHeight = _o[0], setAppBarHeight = _o[1];
+    var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.iconCSS, iconCSS = _h === void 0 ? '' : _h, _j = _a.sidebarCss, sidebarCss = _j === void 0 ? '' : _j, activeCss = _a.activeCss, _k = _a.bodyCss, bodyCss = _k === void 0 ? '' : _k, _l = _a.popIcon, popIcon = _l === void 0 ? false : _l, _m = _a.dividers, dividers = _m === void 0 ? false : _m, _o = _a.links, links = _o === void 0 ? [] : _o, children = _a.children, onClose = _a.onClose;
+    var _p = (0, react_1.useState)(false), isMobile = _p[0], setIsMobile = _p[1];
+    var _q = (0, react_1.useState)(open), internalOpen = _q[0], setInternalOpen = _q[1];
+    var _r = (0, react_1.useState)('0px'), appBarHeight = _r[0], setAppBarHeight = _r[1];
     var pathname = (0, navigation_1.usePathname)();
     var sidebarRef = (0, react_1.useRef)(null);
     var updateIsMobile = (0, react_1.useCallback)(function () {
@@ -108,8 +108,8 @@ function SideBar(_a) {
             react_1.default.createElement("section", { className: "sidebar-body mt-3" },
                 links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, Object.entries(groupedLinks).map(function (_a) {
                     var section = _a[0], sectionLinks = _a[1];
-                    return (react_1.default.createElement("div", { key: section, className: "sidebar-section mb-2 bt pt-2 pb-2" },
-                        react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-5 p-1 pl-2 pr-2" }, section),
+                    return (react_1.default.createElement("div", { key: section, className: "sidebar-section ".concat(dividers ? "bt" : "", " pt-2 pb-2") },
+                        react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-6 p-1 pl-2 pr-2" }, section),
                         sectionLinks.map(function (link) {
                             var isActive = pathname === link.uri;
                             return (react_1.default.createElement(link_1.default, { onClick: function () {
@@ -118,7 +118,7 @@ function SideBar(_a) {
                                     }
                                 }, key: link.uri, href: link.uri },
                                 react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link  ".concat(isActive ? "primary50 outline-primary200 ".concat(activeCss || '') : 'hoverable') },
-                                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, link.icon),
+                                    react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(popIcon ? "p-1 border lighter central" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon),
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),

package/ui/sidebar/SideBar.tsx

@@ -30,7 +30,10 @@ interface SideBarProps {
   sidebarWidth?: number;
   sidebarCss?: string;
   activeCss?: string;
+  iconCSS?: string;
   bodyCss?: string;
+  popIcon?:boolean;
+  dividers?:boolean;
   links?: SideBarLink[];
   children?: ReactNode;
   onClose?: () => void;
@@ -45,9 +48,12 @@ export default function SideBar({
   footer,
   top = 0,
   sidebarWidth = 250,
+  iconCSS = '',
   sidebarCss = '',
   activeCss,
   bodyCss = '',
+  popIcon = false,
+  dividers = false,
   links = [],
   children,
   onClose,
@@ -147,8 +153,8 @@ export default function SideBar({
             {links.length > 0 && (
               <nav className="sidebar-links">
                 {Object.entries(groupedLinks).map(([section, sectionLinks]) => (
-                  <div key={section} className="sidebar-section mb-2 bt pt-2 pb-2">
-                    <Text size="sm" funcss="opacity-5 p-1 pl-2 pr-2">{section}</Text>
+                  <div key={section} className={`sidebar-section ${dividers ? "bt" : ""} pt-2 pb-2`}>
+                    <Text size="sm" funcss="opacity-6 p-1 pl-2 pr-2">{section}</Text>
                     {sectionLinks.map(link => {
                       const isActive = pathname === link.uri;
                       return (
@@ -160,7 +166,7 @@ export default function SideBar({
                           <div   className={`p-1 pl-2 pr-2 sidebar-link  ${
                             isActive ? `primary50 outline-primary200 ${activeCss || ''}` : 'hoverable'
                           }`}>
-                            <span style={{ lineHeight: 0 }}>{link.icon}</span>
+                            <span className={`${iconCSS || '' } ${popIcon ? `p-1 border lighter central` : ""}`} style={{ lineHeight: 0  , borderRadius:"0.4rem"}}>{link.icon}</span>
                             <Text text={link.text} size="sm" weight={400} />
                           </div>
                         </Link>