woi-react-components/dist/components/WOITopNavbar/index.js

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import styled from "styled-components";
import WOITextButton from '../WOITextButton';
var dropData = [
    {
        name: "Product",
        link: "/product"
    },
    {
        name: "Solutions",
        link: "/solutions",
        drop: [
            {
                name: "Drop 1",
                link: "/drop1"
            },
            {
                name: "Drop 2",
                link: "/drop2"
            },
            {
                name: "Drop 3",
                link: "/drop3"
            }
        ],
    },
    {
        name: "Services",
        link: "/services",
        drop: [
            {
                name: "Drop 1",
                link: "/drop1"
            },
            {
                name: "Drop 2",
                link: "/drop2"
            },
            {
                name: "Drop 3",
                link: "/drop3"
            }
        ],
    },
    {
        name: "Pricing",
        link: "/pricing"
    }
];
var WOITopNavbar = function (props) {
    var headerLogo = props.headerLogo, _a = props.fontFamily, fontFamily = _a === void 0 ? 'Roboto' : _a, fontSize = props.fontSize, fontWeight = props.fontWeight, _b = props.borderRadius, borderRadius = _b === void 0 ? 0 : _b, _c = props.backgroundColor, backgroundColor = _c === void 0 ? 'white' : _c, _d = props.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = props.borderThickness, borderThickness = _e === void 0 ? '0px' : _e, headerIconLink = props.headerIconLink, _f = props.headerLink, headerLink = _f === void 0 ? '/' : _f, openLinkInNewTab = props.openLinkInNewTab, headerFunction = props.headerFunction, _g = props.headerText, headerText = _g === void 0 ? "magnifico" : _g, _h = props.iconPosition, iconPosition = _h === void 0 ? 'left' : _h, _j = props.iconSize, iconSize = _j === void 0 ? 80 : _j, _k = props.menuItems, menuItems = _k === void 0 ? dropData : _k, _l = props.textColor, textColor = _l === void 0 ? 'black' : _l, _m = props.hoverTextColor, hoverTextColor = _m === void 0 ? '#2563EB' : _m, _o = props.hoverUnderline, hoverUnderline = _o === void 0 ? true : _o;
    var _p = useState(false), onHover = _p[0], setHoverState = _p[1];
    var _q = useState(0), menuHover = _q[0], setMenuHover = _q[1];
    var _r = useState(0), menuActive = _r[0], setMenuActive = _r[1];
    var _s = useState(-1), dropOpen = _s[0], setDropOpen = _s[1];
    var _t = useState(-1), dropHover = _t[0], setDropHover = _t[1];
    var pi_icon = _jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, { children: [_jsx("path", { d: "M11.8596 8.35092H7.64904V4.14039C7.64904 3.95427 7.57511 3.77578 7.4435 3.64418C7.3119 3.51257 7.13341 3.43864 6.94729 3.43864C5.83694 3.43864 4.75152 3.76789 3.8283 4.38477C2.90508 5.00165 2.18551 5.87844 1.7606 6.90427C1.33568 7.9301 1.22451 9.0589 1.44113 10.1479C1.65775 11.2369 2.19243 12.2373 2.97757 13.0224C3.7627 13.8075 4.76303 14.3422 5.85205 14.5588C6.94106 14.7755 8.06986 14.6643 9.09569 14.2394C10.1215 13.8144 10.9983 13.0949 11.6152 12.1717C12.2321 11.2484 12.5613 10.163 12.5613 9.05267C12.5613 8.86655 12.4874 8.68806 12.3558 8.55646C12.2242 8.42485 12.0457 8.35092 11.8596 8.35092Z", fill: "#9CA3AF" }), _jsx("path", { d: "M9.05255 1.33337C8.86644 1.33337 8.68794 1.40731 8.55634 1.53891C8.42473 1.67052 8.3508 1.84901 8.3508 2.03513V6.94741C8.3508 7.13353 8.42473 7.31202 8.55634 7.44362C8.68794 7.57523 8.86644 7.64916 9.05255 7.64916H13.9648C14.1509 7.64916 14.3294 7.57523 14.461 7.44362C14.5927 7.31202 14.6666 7.13353 14.6666 6.94741C14.6649 5.45899 14.0729 4.03201 13.0204 2.97953C11.968 1.92706 10.541 1.33505 9.05255 1.33337Z", fill: "#9CA3AF" })] }));
    // Created styled button widget
    var TopNavbarWidget = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        width: 1440px;\n        height: 96px;\n        padding: 24px;\n        justify-content: space-between;\n        align-items: center;\n        background-color: ", ";\n        border-radius: ", "px;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        font-style: normal;\n        font-weight: ", ";\n        line-height: normal;\n        color: ", ";\n    "], ["\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        width: 1440px;\n        height: 96px;\n        padding: 24px;\n        justify-content: space-between;\n        align-items: center;\n        background-color: ", ";\n        border-radius: ", "px;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        font-style: normal;\n        font-weight: ", ";\n        line-height: normal;\n        color: ", ";\n    "])), backgroundColor, borderRadius, borderColor, borderThickness, fontFamily ? fontFamily : 'Roboto', fontSize ? fontSize + 'px' : '16px', fontWeight ? fontWeight : '400', textColor);
    var TopNavbarWidgetLeft = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: var(--blue-gray-900, #0F172A);\n        font-size: 32px;\n        font-style: normal;\n        font-weight: 700;\n        line-height: 110%;\n        cursor: pointer;\n        font-family: ", ";\n    "], ["\n        color: var(--blue-gray-900, #0F172A);\n        font-size: 32px;\n        font-style: normal;\n        font-weight: 700;\n        line-height: 110%;\n        cursor: pointer;\n        font-family: ", ";\n    "])), fontFamily ? fontFamily : 'Roboto');
    var TopNavbarWidgetCenter = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: row;\n        gap: 24px;\n        font-family: ", ";\n    "], ["\n        display: flex;\n        flex-direction: row;\n        gap: 24px;\n        font-family: ", ";\n    "])), fontFamily ? fontFamily : 'Roboto');
    var TopNavbarWidgetRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: row;\n        gap: 24px;\n    "], ["\n        display: flex;\n        flex-direction: row;\n        gap: 24px;\n    "])));
    var MenuItem = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        display: flex;\n        padding: 12px 8px;\n        align-items: center;\n        gap: 8px;\n        align-self: stretch;\n        cursor: pointer;\n        position: relative;\n    "], ["\n        display: flex;\n        padding: 12px 8px;\n        align-items: center;\n        gap: 8px;\n        align-self: stretch;\n        cursor: pointer;\n        position: relative;\n    "])));
    // style={{ borderBottom: `${(hoverUnderline && menuHover == index) ? `3px solid ${hoverTextColor}` : '3px solid transparent'}`, 
    // color: `${(menuActive == index) ? hoverTextColor : textColor}` }}
    var MenuText = styled.h2(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        padding-bottom: 3px;\n        color: ", ";\n        border-bottom: ", ";\n        font-family: ", ";\n        "], ["\n        padding-bottom: 3px;\n        color: ", ";\n        border-bottom: ", ";\n        font-family: ", ";\n        "])), function (props) { return (props.index == menuActive) ? hoverTextColor : textColor; }, function (props) { return (hoverUnderline && props.index == menuHover) ? "3px solid ".concat(hoverTextColor) : '3px solid transparent'; }, fontFamily ? fontFamily : 'Roboto');
    var DropdownContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        position: absolute;\n        background: var(--white, #FFF);\n        border: 1px solid var(--blue-gray-200, #E5E7EB);\n        border-radius: 8px;\n        top: 120px;\n        display: flex;\n        width: 224px;\n        padding: var(--1, 4px) var(--0, 0px);\n        flex-direction: column;\n        align-items: flex-start;\n        gap: var(--0, 0px);\n        font-family: ", ";\n    "], ["\n        position: absolute;\n        background: var(--white, #FFF);\n        border: 1px solid var(--blue-gray-200, #E5E7EB);\n        border-radius: 8px;\n        top: 120px;\n        display: flex;\n        width: 224px;\n        padding: var(--1, 4px) var(--0, 0px);\n        flex-direction: column;\n        align-items: flex-start;\n        gap: var(--0, 0px);\n        font-family: ", ";\n    "])), fontFamily ? fontFamily : 'Roboto');
    var DropItem = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        display: flex;\n        padding: var(--2, 8px) var(--4, 16px);\n        align-items: center;\n        gap: var(--15, 6px);\n        align-self: stretch;\n        cursor: pointer;\n\n        color: var(--gray-500, var(--gray-500, #6B7280));\n\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 125%;\n        font-family: ", ";\n    "], ["\n        display: flex;\n        padding: var(--2, 8px) var(--4, 16px);\n        align-items: center;\n        gap: var(--15, 6px);\n        align-self: stretch;\n        cursor: pointer;\n\n        color: var(--gray-500, var(--gray-500, #6B7280));\n\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 125%;\n        font-family: ", ";\n    "])), fontFamily ? fontFamily : 'Roboto');
    var Dropdown = function () {
        var _a, _b, _c;
        return (_jsx(_Fragment, { children: ((_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems[menuHover]) === null || _a === void 0 ? void 0 : _a.drop) &&
                _jsx(DropdownContainer, { children: (_c = (_b = menuItems === null || menuItems === void 0 ? void 0 : menuItems[menuHover]) === null || _b === void 0 ? void 0 : _b.drop) === null || _c === void 0 ? void 0 : _c.map(function (item, index) {
                        return (_jsxs(DropItem, __assign({ onClick: function () { return window.open(item === null || item === void 0 ? void 0 : item.link, openLinkInNewTab ? '_blank' : '_self'); }, onMouseEnter: function () { return setDropHover(index); }, style: { color: "".concat((dropHover == index) ? hoverTextColor : textColor) } }, { children: [_jsx("p", { children: pi_icon }), _jsx("p", { children: item === null || item === void 0 ? void 0 : item.name })] }), index));
                    }) }) }));
    };
    var handleMenuClick = function (item, index) {
        setMenuActive(index);
        !(item === null || item === void 0 ? void 0 : item.drop) && window.open(item === null || item === void 0 ? void 0 : item.link, openLinkInNewTab ? '_blank' : '_self');
    };
    var handleMenuHover = function (index) {
        setDropOpen(index);
        setMenuHover(index);
    };
    var handleMenuOut = function () {
        setDropOpen(-1);
        setMenuHover(-1);
    };
    var SVGComponent = function (props) {
        // You can access the SVG passed as a prop using props.svg
        var svg = props.svg;
        return (_jsx("div", { children: _jsx("div", { dangerouslySetInnerHTML: { __html: svg } }) }));
    };
    return (_jsxs(TopNavbarWidget, __assign({ onMouseEnter: function () { return setHoverState(true); }, onMouseLeave: function () { return setHoverState(false); } }, { children: [(iconPosition == 'left' || iconPosition == '') && _jsx(TopNavbarWidgetLeft, __assign({ onClick: function () { return headerLink ? window.open(headerLink, openLinkInNewTab ? '_blank' : '_self') : headerFunction === null || headerFunction === void 0 ? void 0 : headerFunction(); } }, { children: headerIconLink ? _jsx("img", { src: headerIconLink, alt: headerText, height: iconSize, width: iconSize }) : headerText ? _jsx("h1", { children: headerText }) : headerLogo ? _jsx("div", { children: _jsx(SVGComponent, { svg: headerLogo }) }) : null })), _jsx(TopNavbarWidgetCenter, __assign({ onMouseLeave: handleMenuOut }, { children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) {
                    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' }, onClick: function () { return handleMenuClick(item, index); }, onMouseEnter: function () { return handleMenuHover(index); } }, { children: [_jsxs(MenuItem, { children: [_jsx(MenuText, __assign({ index: index }, { children: item.name })), item.drop && _jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "25", height: "24", viewBox: "0 0 25 24", fill: "".concat((menuActive == index) ? hoverTextColor : textColor) }, { children: _jsx("path", { d: "M12.5709 13.314L17.5209 8.364C17.6131 8.26849 17.7235 8.19231 17.8455 8.1399C17.9675 8.08749 18.0987 8.05991 18.2315 8.05875C18.3643 8.0576 18.496 8.0829 18.6189 8.13318C18.7417 8.18346 18.8534 8.25772 18.9473 8.35161C19.0412 8.4455 19.1154 8.55715 19.1657 8.68005C19.216 8.80295 19.2413 8.93463 19.2402 9.06741C19.239 9.20018 19.2114 9.3314 19.159 9.45341C19.1066 9.57541 19.0304 9.68576 18.9349 9.778L13.2779 15.435C13.0904 15.6225 12.8361 15.7278 12.5709 15.7278C12.3057 15.7278 12.0514 15.6225 11.8639 15.435L6.2069 9.778C6.11139 9.68576 6.03521 9.57541 5.9828 9.45341C5.93039 9.3314 5.9028 9.20018 5.90165 9.06741C5.9005 8.93463 5.9258 8.80295 5.97608 8.68005C6.02636 8.55715 6.10061 8.4455 6.1945 8.35161C6.2884 8.25772 6.40005 8.18346 6.52295 8.13318C6.64584 8.0829 6.77752 8.0576 6.9103 8.05875C7.04308 8.05991 7.1743 8.08749 7.2963 8.1399C7.41831 8.19231 7.52865 8.26849 7.6209 8.364L12.5709 13.314Z", fill: "".concat((menuActive == index) ? hoverTextColor : textColor) }) }))] }, index), (dropOpen == index && (item === null || item === void 0 ? void 0 : item.drop)) ? _jsx(Dropdown, {}) : null] })));
                }) })), iconPosition == 'center' && _jsx(TopNavbarWidgetLeft, __assign({ onClick: function () { return headerLink ? window.open(headerLink, openLinkInNewTab ? '_blank' : '_self') : headerFunction === null || headerFunction === void 0 ? void 0 : headerFunction(); } }, { children: headerIconLink ? _jsx("img", { src: headerIconLink, alt: headerText, height: iconSize, width: iconSize }) : _jsx("h1", { children: headerText }) })), _jsxs(TopNavbarWidgetRight, { children: [_jsx(WOITextButton, { backgroundColor: "transparent", borderColor: "transparent", borderRadius: 8, borderThickness: "", fontSize: 16, fontWeight: 600, height: 50, hoverBackgroundColor: "transparent", hoverTextColor: "#2563EB", loaderColor: "#6d5252", openLink: "https://www.wikipedia.org/", openLinkInNewTab: true, prefixIcon: "", text: "Login", textColor: "#2563EB", textTransform: "capitalize", width: 200 }), _jsx(WOITextButton, { backgroundColor: "#2563EB", borderColor: "#2563EB", borderRadius: 8, borderThickness: "", fontSize: 16, fontWeight: 600, gradientDirection: "left", height: 50, hoverBackgroundColor: "#2563EB", hoverGradientDirection: "left", hoverTextColor: "#ffffff", loaderColor: "#6d5252", openLink: "https://www.wikipedia.org/", openLinkInNewTab: true, prefixIcon: "", suffixIcon: "https://cdn-icons-png.flaticon.com/512/32/32213.png", text: "Sign Up Free", textColor: "#ffffff", textTransform: "capitalize", width: 200 })] }), iconPosition == 'right' && _jsx(TopNavbarWidgetLeft, __assign({ onClick: function () { return headerLink ? window.open(headerLink, openLinkInNewTab ? '_blank' : '_self') : headerFunction === null || headerFunction === void 0 ? void 0 : headerFunction(); } }, { children: headerIconLink ? _jsx("img", { src: headerIconLink, alt: headerText, height: iconSize, width: iconSize }) : _jsx("h1", { children: headerText }) }))] })));
};
export default WOITopNavbar;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;