funuicss 3.7.3 → 3.7.4

package/css/fun.css

@@ -1653,6 +1653,195 @@ border-radius: var(--borderRadius);
   cursor: pointer;
 }
 
+/* AppBar Dropdown Styles */
+.nav_item {
+  position: relative;
+}
+
+.nav_item.has-dropdown .nav_link {
+  cursor: pointer;
+}
+
+.nav_link-arrow {
+  transition: transform 0.3s ease;
+  margin-left: 0.25rem;
+}
+
+.nav_item.dropdown-open .nav_link-arrow {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Menu */
+.nav_dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--page-bg);
+  border: var(--border);
+  border-radius: 0.5rem;
+  box-shadow: var(--card);
+  min-width: 200px;
+  z-index: 1000;
+  opacity: 0;
+  transform: translateY(-10px);
+  font-size: var(--minifiedFontSize);
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+/* Dropdown Links */
+.nav_dropdown-menu .nav_item {
+  border-bottom: var(--border);
+}
+
+.nav_dropdown-menu .nav_item:last-child {
+  border-bottom: none;
+}
+
+.nav_dropdown-menu .nav_link {
+  display: block;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-radius: 0;
+}
+
+.nav_dropdown-menu .nav_link:hover {
+  background: var(--lighter);
+  color: var(--primary) !important;
+}
+
+.nav_dropdown-menu .nav_link.active {
+  background: var(--primary100);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* Nested Dropdowns */
+.nav_dropdown-menu .nav_dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-left: 0.25rem;
+}
+
+.nav_dropdown-menu .nav_item.has-dropdown .nav_link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Mobile Dropdown Styles */
+.nav_dropdown-mobile {
+  position: static !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: var(--raiseOpaque) !important;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+  opacity: 1 !important;
+  transform: none !important;
+  visibility: visible !important;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-mobile {
+  max-height: 500px;
+}
+
+.nav_dropdown-mobile .nav_link {
+  padding: 0.5rem 1rem !important;
+}
+
+/* Mobile Menu */
+.nav_mobile-menu {
+  position: fixed;
+  top: var(--navHeight);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--raiseOpaque);
+  z-index: 999;
+  overflow-y: auto;
+  padding: 1rem;
+  border-top: var(--border);
+}
+
+.nav_mobile-menu .nav_links {
+  align-items: flex-start !important;
+}
+
+.nav_mobile-menu .nav_item {
+  width: 100%;
+}
+
+.nav_mobile-menu .nav_link {
+  width: 100%;
+  justify-content: space-between;
+  padding: 1rem !important;
+  border-bottom: var(--border);
+}
+
+/* Active Link Styles */
+.nav_link.active {
+  color: var(--primary) !important;
+  font-weight: 600;
+}
+
+/* Hover Effects */
+.nav_link:hover {
+  color: var(--primary) !important;
+}
+
+/* Icon Styles */
+.nav_link-icon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+
+.nav_link:hover .nav_link-icon.prefix {
+  transform: translateX(-2px);
+}
+
+.nav_link:hover .nav_link-icon.suffix {
+  transform: translateX(2px);
+}
+
+/* Smooth Transitions */
+.nav_link,
+.nav_link-content,
+.nav_dropdown-menu {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Focus States */
+.nav_link:focus {
+  outline: 2px solid  var(--primary);
+  outline-offset: 2px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav_dropdown-menu {
+    position: static;
+    box-shadow: none;
+    border: none;
+    background: var(--raiseOpaque);
+    margin-left: 1rem;
+  }
+  
+  .nav_item.dropdown-open .nav_dropdown-menu {
+    max-height: 500px;
+  }
+}
+
 
 
 /* video */
@@ -1727,7 +1916,7 @@ border-radius: var(--borderRadius);
   line-height: 0;
   color: var(--text-color);
 }
-
+ 
 
 
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.3",
+  "version": "3.7.4",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/appbar/AppBar.d.ts

@@ -1,20 +1,50 @@
 import * as React from 'react';
+interface NavLink {
+    label: string;
+    href: string;
+    icon?: string;
+    iconPosition?: 'prefix' | 'suffix';
+    children?: NavLink[];
+    active?: boolean;
+    className?: string;
+}
 interface NavbarProps {
     fixedTop?: boolean;
     funcss?: string;
     padding?: string;
     fixedBottom?: boolean;
     justify?: string;
+    transparent?: boolean;
     children?: React.ReactNode;
     left?: React.ReactNode;
     center?: React.ReactNode;
     right?: React.ReactNode;
     sidebarTrigger?: React.ReactNode;
-    transparent?: boolean;
     sideBar?: number;
     hasSidebar?: boolean;
     sidebarOpen?: boolean;
     openSidebar?: () => void;
+    variant?: string;
+    leftLinks?: NavLink[] | string;
+    centerLinks?: NavLink[] | string;
+    rightLinks?: NavLink[] | string;
+    renderLink?: (link: NavLink, index: number) => React.ReactNode;
+    mobileMenuBreakpoint?: number;
+    logoType?: 'text' | 'image' | 'both' | 'none';
+    logoText?: string;
+    logoTextSize?: string;
+    logoTextColor?: string;
+    logoTextWeight?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    logoWidth?: string;
+    logoHeight?: string;
+    logoHref?: string;
+    onLogoClick?: () => void;
+    linkGap?: string;
+    linkPadding?: string;
+    activeLinkColor?: string;
+    dropdownArrow?: boolean;
 }
-export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, hasSidebar, openSidebar, sidebarOpen }: NavbarProps): React.JSX.Element;
+export default function AppBar(localProps: NavbarProps): React.JSX.Element;
 export {};

package/ui/appbar/AppBar.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,18 +49,174 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = AppBar;
 var React = __importStar(require("react"));
 var react_1 = require("react");
-var navigation_1 = require("next/navigation"); // <-- Updated import
+var navigation_1 = require("next/navigation");
 var Hamburger_1 = __importDefault(require("./Hamburger"));
-function AppBar(_a) {
-    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent, hasSidebar = _a.hasSidebar, openSidebar = _a.openSidebar, _b = _a.sidebarOpen, sidebarOpen = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useState)(false), isMobileMenuOpen = _c[0], setIsMobileMenuOpen = _c[1];
-    var _d = (0, react_1.useState)(false), isMobileScreen = _d[0], setIsMobileScreen = _d[1];
-    var pathname = (0, navigation_1.usePathname)(); // <-- New hook to detect path changes
+var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+// Parse string to object utility
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            var parsed = JSON.parse(value);
+            if (Array.isArray(fallback) && !Array.isArray(parsed)) {
+                console.warn('Parsed value is not an array, using fallback');
+                return fallback;
+            }
+            return parsed;
+        }
+        catch (error) {
+            console.error('Failed to parse JSON string:', error);
+            return fallback;
+        }
+    }
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Dropdown Arrow Icon Component
+var DropdownArrow = function (_a) {
+    var isOpen = _a.isOpen;
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", style: {
+            transition: 'transform 0.3s ease',
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+        } },
+        React.createElement("path", { d: "M4 6 L8 10 L12 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
+};
+// Link Item Component with Dropdown Support
+var LinkItem = function (_a) {
+    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '0.5rem 1rem' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
+    var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = (0, react_1.useState)(null), iconNode = _g[0], setIconNode = _g[1];
+    var timeoutRef = (0, react_1.useRef)();
+    var dropdownRef = (0, react_1.useRef)(null);
+    // Handle dynamic icon loading
+    (0, react_1.useEffect)(function () {
+        if (link.icon) {
+            (0, getDynamicIcon_1.getDynamicIcon)(link.icon).then(setIconNode);
+        }
+        else {
+            setIconNode(null);
+        }
+    }, [link.icon]);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var hasChildren = link.children && link.children.length > 0;
+    var handleMouseEnter = function () {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (!isMobile && hasChildren) {
+            setIsOpen(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (!isMobile) {
+            timeoutRef.current = setTimeout(function () { return setIsOpen(false); }, 150);
+        }
+    };
+    var handleClick = function (e) {
+        if (hasChildren && isMobile) {
+            e.preventDefault();
+            setIsOpen(!isOpen);
+        }
+    };
+    var linkContent = (React.createElement("span", { className: "nav_link-content ".concat(link.active ? 'active' : '', " ").concat(link.className || ''), style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            padding: linkPadding,
+            color: 'inherit',
+            textDecoration: 'none'
+        } },
+        iconNode && link.iconPosition !== 'suffix' && (React.createElement("span", { className: "nav_link-icon prefix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
+        React.createElement("span", { className: "nav_link-text" }, link.label),
+        iconNode && link.iconPosition === 'suffix' && (React.createElement("span", { className: "nav_link-icon suffix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
+        hasChildren && dropdownArrow && (React.createElement("span", { className: "nav_link-arrow", style: { display: 'flex', alignItems: 'center' } },
+            React.createElement(DropdownArrow, { isOpen: isOpen })))));
+    // If custom renderer is provided, use it
+    if (renderLink) {
+        return renderLink(link, 0);
+    }
+    return (React.createElement("div", { ref: dropdownRef, className: "nav_item ".concat(hasChildren ? 'has-dropdown' : '', " ").concat(isOpen ? 'dropdown-open' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { position: 'relative' } },
+        React.createElement("a", { href: link.href, className: "nav_link ".concat(link.active ? 'active' : ''), onClick: handleClick, style: {
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center'
+            } }, linkContent),
+        hasChildren && isOpen && (React.createElement("div", { className: "nav_dropdown-menu ".concat(isMobile ? 'nav_dropdown-mobile' : '') }, link.children.map(function (child, index) { return (React.createElement(LinkItem, { key: index, link: child, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })))));
+};
+// Links component to render navigation links
+var NavLinks = function (_a) {
+    var links = _a.links, renderLink = _a.renderLink, _b = _a.linkGap, linkGap = _b === void 0 ? '1rem' : _b, _c = _a.linkPadding, linkPadding = _c === void 0 ? '0.5rem 1rem' : _c, _d = _a.activeLinkColor, activeLinkColor = _d === void 0 ? 'primary' : _d, _e = _a.dropdownArrow, dropdownArrow = _e === void 0 ? true : _e, _f = _a.isMobile, isMobile = _f === void 0 ? false : _f;
+    if (!links || !Array.isArray(links) || links.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "nav_links", style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: linkGap,
+            flexDirection: isMobile ? 'column' : 'row'
+        } }, links.map(function (link, index) { return (React.createElement(LinkItem, { key: index, link: link, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })));
+};
+// Logo component with multiple display options
+var Logo = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.text, text = _c === void 0 ? 'MyApp' : _c, _d = _a.textSize, textSize = _d === void 0 ? 'xl' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'primary' : _e, _f = _a.textWeight, textWeight = _f === void 0 ? 'bold' : _f, _g = _a.url, url = _g === void 0 ? '' : _g, _h = _a.alt, alt = _h === void 0 ? 'Logo' : _h, _j = _a.width, width = _j === void 0 ? '40px' : _j, _k = _a.height, height = _k === void 0 ? 'auto' : _k, _l = _a.href, href = _l === void 0 ? '/' : _l, onClick = _a.onClick;
+    if (type === 'none')
+        return null;
+    var logoContent = (React.createElement("div", { className: "logo-content", style: { display: 'flex', alignItems: 'center', gap: '0.75rem' } },
+        (type === 'image' || type === 'both') && url && (React.createElement("img", { src: url, alt: alt, style: {
+                width: width,
+                height: height,
+                objectFit: 'contain',
+                display: 'block'
+            }, className: "logo-image" })),
+        (type === 'text' || type === 'both') && text && (React.createElement("span", { className: "logo-text text-".concat(textSize, " text-").concat(textColor, " font-").concat(textWeight), style: {
+                lineHeight: 1,
+                whiteSpace: 'nowrap'
+            } }, text))));
+    // Wrap in link if href provided
+    if (href) {
+        return (React.createElement("a", { href: href, onClick: onClick, style: {
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center'
+            }, className: "logo-link" }, logoContent));
+    }
+    return (React.createElement("div", { onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' }, className: "logo-container" }, logoContent));
+};
+function AppBar(localProps) {
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AppBar', localProps.variant).mergeWithLocal;
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Parse link props if they're strings
+    var parsedLeftLinks = parseIfString(mergedProps.leftLinks, []);
+    var parsedCenterLinks = parseIfString(mergedProps.centerLinks, []);
+    var parsedRightLinks = parseIfString(mergedProps.rightLinks, []);
+    // Use mergedProps directly
+    var final = mergedProps;
+    var _a = (0, react_1.useState)(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
+    var _b = (0, react_1.useState)(false), isMobileScreen = _b[0], setIsMobileScreen = _b[1];
+    var pathname = (0, navigation_1.usePathname)();
     var toggleMenu = function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); };
     var closeMenu = function () { return setIsMobileMenuOpen(false); };
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
-            var isMobile = window.innerWidth < 992;
+            var isMobile = window.innerWidth < (final.mobileMenuBreakpoint || 992);
             setIsMobileScreen(isMobile);
             if (!isMobile) {
                 closeMenu(); // close on larger screens
@@ -60,7 +225,7 @@ function AppBar(_a) {
         handleResize(); // initial check
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
+    }, [final.mobileMenuBreakpoint]);
     // Automatically close menu on route (pathname) change
     (0, react_1.useEffect)(function () {
         closeMenu();
@@ -69,19 +234,56 @@ function AppBar(_a) {
         var isOpen = _a.isOpen;
         return React.createElement(Hamburger_1.default, { isOpen: isOpen });
     };
-    return (React.createElement("nav", { 
-        // the id will be used to get the height for the sidebar in the sidebar file
-        id: 'appBar', className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
-            padding: "".concat(padding || ''),
-            justifyContent: "".concat(justify || ''),
-        } },
-        React.createElement("div", { className: "logoWrapper" },
-            left,
-            isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
-                React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
-        React.createElement("div", { className: "linkWrapper" }, center),
-        React.createElement("div", { className: "linkWrapper" }, right),
-        isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, hasSidebar ?
-            React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: openSidebar }, sidebarTrigger || React.createElement(Trigger, { isOpen: sidebarOpen }))
-            : React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))));
+    // Enhanced left section with logo customization
+    var renderLeftSection = function () {
+        // If custom left content is provided, use it (overrides everything)
+        if (final.left)
+            return final.left;
+        // Render logo based on configuration
+        var shouldRenderLogo = final.logoType && final.logoType !== 'none';
+        var hasLeftLinks = parsedLeftLinks.length > 0;
+        return (React.createElement("div", { className: "left-section", style: { display: 'flex', alignItems: 'center', gap: '2rem' } },
+            shouldRenderLogo && (React.createElement(Logo, { type: final.logoType, text: final.logoText, textSize: final.logoTextSize, textColor: final.logoTextColor, textWeight: final.logoTextWeight, url: final.logoUrl, alt: final.logoAlt, width: final.logoWidth, height: final.logoHeight, href: final.logoHref, onClick: final.onLogoClick })),
+            hasLeftLinks && !isMobileScreen && (React.createElement(NavLinks, { links: parsedLeftLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }))));
+    };
+    var renderCenterSection = function () {
+        if (final.center)
+            return final.center;
+        if (parsedCenterLinks.length > 0 && !isMobileScreen) {
+            return (React.createElement(NavLinks, { links: parsedCenterLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        }
+        return null;
+    };
+    var renderRightSection = function () {
+        if (final.right)
+            return final.right;
+        if (parsedRightLinks.length > 0 && !isMobileScreen) {
+            return (React.createElement(NavLinks, { links: parsedRightLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        }
+        return null;
+    };
+    // Mobile menu content
+    var renderMobileMenu = function () {
+        if (!isMobileScreen || !isMobileMenuOpen)
+            return null;
+        var allLinks = __spreadArray(__spreadArray(__spreadArray([], parsedLeftLinks, true), parsedCenterLinks, true), parsedRightLinks, true);
+        return (React.createElement("div", { className: "nav_mobile-menu" },
+            React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true })));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n        "), style: {
+                padding: "".concat(final.padding || ''),
+                justifyContent: "".concat(final.justify || ''),
+            } },
+            React.createElement("div", { className: "logoWrapper" },
+                renderLeftSection(),
+                isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
+                    React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
+            React.createElement("div", { className: "linkWrapper" }, renderCenterSection()),
+            React.createElement("div", { className: "linkWrapper" }, renderRightSection()),
+            isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, final.hasSidebar ?
+                React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: final.openSidebar }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: final.sidebarOpen }))
+                :
+                    React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))),
+        renderMobileMenu()));
 }