@progress/sitefinity-nextjs-sdk/widgets/navigation/horizontal.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getClass } from './utils';
import { combineClassNames } from '../../editor/utils/classNames';
import { getUniqueId } from '../../editor/utils/getUniqueId';
export function Horizontal({ navCustomAttributes, items, attributes }) {
    let navbarId = getUniqueId('navbar');
    return (_jsx("div", { ...attributes, children: _jsx("nav", { className: "navbar navbar-expand-md navbar-light bg-light", ...navCustomAttributes, children: _jsxs("div", { className: "container-fluid", children: [_jsx("a", { className: "navbar-brand", href: "#", children: "Navbar" }), _jsx("button", { className: "navbar-toggler", type: "button", "data-bs-toggle": "collapse", "data-bs-target": `#${navbarId}`, "aria-controls": `#${navbarId}`, "aria-expanded": "false", "aria-label": "Toggle Navigation", children: _jsx("span", { className: "navbar-toggler-icon" }) }), _jsx("div", { className: "collapse navbar-collapse", id: `#${navbarId}`, children: _jsx("ul", { className: "navbar-nav me-auto mb-2 mb-md-0 flex-wrap", children: items.map((node, idx) => {
                                return renderRootLevelNode(node, idx);
                            }) }) })] }) }) }));
}
function renderRootLevelNode(node, idx) {
    const navbarDropdownId = getUniqueId(`navbarDropdownMenuLink-${node.Key}`);
    if (node.ChildNodes.length > 0) {
        {
            return (_jsxs("li", { className: combineClassNames('nav-item', 'dropdown', getClass(node)), children: [_jsx("a", { className: "nav-link dropdown-toggle", href: "#", id: navbarDropdownId, "data-bs-toggle": "dropdown", "aria-haspopup": "true", "aria-expanded": "false", children: node.Title }), _jsx("ul", { className: "dropdown-menu", "aria-labelledby": navbarDropdownId, children: renderSubLevelsRecursive(node) })] }, idx));
        }
    }
    return (_jsx("li", { className: "nav-item", children: _jsx("a", { className: combineClassNames('nav-link', getClass(node)), href: node.Url, target: node.LinkTarget, children: node.Title }) }, idx));
}
function renderSubLevelsRecursive(node) {
    {
        return node.ChildNodes.map((childNode, idx) => {
            if (childNode.ChildNodes.length) {
                return (_jsxs("li", { className: "dropdown-submenu", children: [_jsxs("a", { className: combineClassNames('dropdown-item', getClass(childNode)), href: childNode.Url, target: childNode.LinkTarget, children: [childNode.Title, _jsx("svg", { xmlns: "https://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-right-fill", viewBox: "0 0 16 16", children: _jsx("path", { d: "M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" }) })] }), _jsx("ul", { className: "dropdown-menu", children: renderSubLevelsRecursive(childNode) })] }, idx));
            }
            return (_jsx("li", { children: _jsx("a", { className: combineClassNames('dropdown-item', getClass(childNode)), href: childNode.Url, target: childNode.LinkTarget, children: childNode.Title }) }, idx));
        });
    }
}
;