Menu list implementation showing an error


while implpementing menu list header part plugin we are facing an issue as show in picture
if anybody facing same issue

@nagababu this looks like you have 2 plugins rendering the same menu. There’s a default Menu rendered in the Static layout. Hard to tell without looking at your code.

How did you implement your plugin? Is this page using the default Static layout?

hi i was implement admin for editing and site for rendering these two are as same plugin i shared my code can you please lock into it if any error can you suggest me
admin:editor:
index.js:
import React, { useState, useEffect } from “react”;

import { css } from “emotion”;

import styled from “@emotion/styled”;

import { Menu, MenuItem } from “@webiny/ui/Menu”;

import “./styles.scss”;

// import { PbEditorPageElementPlugin } from “@webiny/app-page-builder/types”;

const HeaderMenuContent = {

logo: {

    width: "200px",

    image: {

        width: "200px",

        height: "200px"

    }

},

empty: {

    width: "10%",

    link: "",

    title: ""

},

WhyUs: {

    width: "123px",

    link: "whyBitLabs",

    title: "Why bitLabs"

},

HowItWorks: {

    width: "63px",

    link: "howItWorks",

    title: "How it works"

},

Curriculam: {

    width: "96px",

    link: "curriculam",

    title: "Curriculam"

},

Placements: {

    width: "129px",

    link: "placements",

    title: "Placements"

},

FAQs: {

    width: "129px",

    link: "bitLabsFAQs",

    title: "FAQs"

},

AboutUs: {

    width: "145px",

    link: "aboutUs",

    title: "About Us"

},

KnowMore: {

    width: "145px",

    link: "joinWaitList",

    title: "Know More"

}

};

const PreviewBox = styled(“div”)({

textAlign: "center",

height: 50,

svg: {

    height: 50,

    width: 50

}

});

export default () => {

return [

    {

        name: "pb-editor-page-element-bitLabs-header",

        type: "pb-editor-page-element",

        elementType: "bitLabs-header",

        toolbar: {

            title: "BitLabs Header",

            group: "pb-editor-element-group-media",

            preview() {

                return (

                    <PreviewBox>

                        <h1>BitLabs Header</h1>

                    </PreviewBox>

                );

            }

        },

        settings: ["pb-editor-page-element-settings-delete"],

        create(options) {

            return {

                type: "bitLabs-header",

                elements: [],

                data: {

                    wrapper: {

                        identifier: ""

                    },

                    settings: {

                        horizontalAlign: "center",

                        margin: {

                            desktop: { all: 0 },

                            mobile: { all: 0 }

                        },

                        padding: {

                            desktop: { all: 0 },

                            mobile: { all: 0 }

                        }

                    }

                },

                ...options

            };

        },

        render(props) {

            return <HeaderMenu {...props} />;

        }

    }

];

};

const outerWrapper = css({

boxSizing: "border-box",

maxWidth: "1000px"

});

const HeaderMenu = () => {

const [showMenu, setShowMenu] = useState(false);

useEffect(() => {

    if (typeof window !== undefined) {

        setShowMenu(true);

    }

}, []);

if (showMenu) {

    return (

        <div className={"webiny-pb-base-page-element-style " + outerWrapper}>

            <div

                className="webiny-pb-base-page-element-style webiny-pb-layout-row"

                style={{

                    justifyContent: "space-between",

                    display: "flex",

                    flexDirection: "row",

                    alignItems: "center"

                }}

            >

                <div

                    className="webiny-pb-base-page-element-style webiny-pb-layout-column"

                    style={{

                        width: "150px !important",

                        margin: "0px 2.5rem 0px 2rem"

                    }}

                >

                    <div

                        className="webiny-pb-base-page-element-style webiny-pb-page-element-image"

                        style={{

                            textAlign: "left !important"

                        }}

                    >

                        <img

                            title="bitLabs-logo"

                            alt="bitLabs-logo"

                            src={require("./assets/logo.png")}

                            style={{

                                width: "150px"

                            }}

                        />

                    </div>

                </div>

                <div className="webiny-pb-bitLabs-standard-menu">

                    <StandardMenuItem content={HeaderMenuContent.WhyUs} />

                    <StandardMenuItem content={HeaderMenuContent.HowItWorks} />

                    <StandardMenuItem content={HeaderMenuContent.Curriculam} />

                    <StandardMenuItem content={HeaderMenuContent.Placements} />

                    <StandardMenuItem content={HeaderMenuContent.FAQs} />

                    <StandardMenuItem content={HeaderMenuContent.AboutUs} />

                </div>

                <div className="webiny-pb-bitLabs-list-style-menu">

                    <Menu

                        handle={

                            <button

                                className={

                                    "webiny-pb-base-page-element-style " +

                                    "webiny-pb-page-element-button " +

                                    "webiny-pb-page-element-button--bitLabs-simple " +

                                    "webiny-pb-bitLabs-list-menu"

                                }

                            ></button>

                        }

                    >

                        <ListMenuItem content={HeaderMenuContent.WhyUs} showMenu={showMenu} />

                        <ListMenuItem

                            content={HeaderMenuContent.HowItWorks}

                            showMenu={showMenu}

                        />

                        <ListMenuItem

                            content={HeaderMenuContent.Curriculam}

                            showMenu={showMenu}

                        />

                        <ListMenuItem

                            content={HeaderMenuContent.Placements}

                            showMenu={showMenu}

                        />

                        <ListMenuItem content={HeaderMenuContent.FAQs} showMenu={showMenu} />

                        <ListMenuItem content={HeaderMenuContent.AboutUs} showMenu={showMenu} />

                        <ListMenuItem

                            content={HeaderMenuContent.KnowMore}

                            showMenu={showMenu}

                        />

                    </Menu>

                </div>

                <div className="webiny-pb-bitLabs-menu-empty-container">

                    <StandardMenuItem content={HeaderMenuContent.empty} />

                </div>

                <div className="webiny-pb-bitLabs-standard-menu">

                    <StandardMenuItem content={HeaderMenuContent.KnowMore} btnStyle="primary" />

                </div>

            </div>

        </div>

    );

} else {

    return <></>;

}

};

const StandardMenuItem = (props) => {

return (

    <div

        className="webiny-pb-base-page-element-style webiny-pb-layout-column"

        style={{

            paddingTop: !!props.btnStyle && props.btnStyle === "primary" ? "0%" : "5px"

        }}

    >

        <div

            style={{

                display: "flex"

            }}

        >

            {!!props.btnStyle && props.btnStyle === "primary" ? (

                <ComplexButton {...props} />

            ) : (

                <SimpleButton {...props} />

            )}

        </div>

    </div>

);

};

const ListMenuItem = (props) => {

if (props.showMenu) {

    return (

        <a

            href={"#" + props.content.link}

            className="webiny-pb-page-element-button--bitLabs-simple "

        >

            <MenuItem>{props.content.title}</MenuItem>

        </a>

    );

} else {

    return <></>;

}

};

const SimpleButton = (props) => {

return (

    <a

        className={

            "webiny-pb-base-page-element-style " +

            "webiny-pb-page-element-button " +

            "webiny-pb-page-element-button--bitLabs-simple "

        }

        href={"#" + props.content.link}

    >

        {props.content.title}

    </a>

);

};

const ComplexButton = (props) => {

return (

    <a

        className={

            "webiny-pb-base-page-element-style " +

            "webiny-pb-page-element-button " +

            "multi-color-btn "

        }

        href={"#" + props.content.link}

    >

        <div className="multi-color-btn-content">{props.content.title}</div>

    </a>

);

};
style.scss:
body {

.webiny-pb-page-document {

    .webiny-pb-page-element-button {

        text-transform: capitalize;

        font-size: 16px;

        font-family: "Roboto", sans-serif;

        font-weight: 500;

        &:hover {

            text-decoration: none;

        }

        &--bitLabs-simple {

            background-color: transparent;

            color: #ffffff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

    }

    .multi-color-btn {

        padding: 2px !important;

        display: inline-block;

        border-radius: 24px;

        height: 52px;

        width: 153px;

        background: linear-gradient(150deg, #ffae2a, #f28222, #e75b1a, #ed711e);

        .multi-color-btn-content {

            background: #151519;

            color: #ffffff;

            padding: 13px;

            border-radius: 24px;

            font: bold 18px "Roboto", sans-serif;

        }

        &:active .bg {

            background: #0a1117;

            color: #ffffff;

        }

    }

    .webiny-pb-bitLabs-menu-empty-container {

        display: flex;

        flex: 1 1 auto;

        justify-content: space-around;

    }

    .webiny-pb-bitLabs-standard-menu {

        display: flex;

        flex: 1 1 auto;

        justify-content: space-around;

    }

    .webiny-pb-bitLabs-menu-contacts-container {

        display: flex;

    }

    .webiny-pb-bitLabs-list-style-menu {

        display: none;

        .webiny-pb-bitLabs-list-menu {

            width: 24px;

            height: 24px;

            content: "";

            background-image: url("./assets/baseline-menu-24px.svg");

            background-size: cover;

        }

    }

    @media (max-width: 910px) and (min-width: 0px) {

        .webiny-pb-bitLabs-standard-menu {

            display: none;

        }

        .webiny-pb-bitLabs-menu-empty-container {

            display: none;

        }

        .webiny-pb-bitLabs-list-style-menu {

            display: block;

            padding: 0rem 2rem;

        }

    }

}

.mdc-menu {

    min-width: 150px;

    .webiny-pb-bitLabs-last-item {

        display: none;

    }

    .webiny-pb-page-element-button {

        text-transform: capitalize;

        font-size: 16px;

        font-family: "Roboto", sans-serif;

        font-weight: 500;

        &:hover {

            text-decoration: none;

        }

        &--bitLabs-primary {

            background-color: transparent;

            color: #fff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

        &--bitLabs-simple {

            background-color: transparent;

            color: #fff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

    }

    @media (max-width: 767px) and (min-width: 0px) {

        .webiny-pb-bitLabs-last-item {

            display: block;

        }

    }

}

}
site : render;
index.js:
import React, { useState, useEffect } from “react”;

import { css } from “emotion”;

import { Menu, MenuItem } from “@webiny/ui/Menu”;

import “./styles.scss”;

// import { PbRenderElementPlugin } from “@webiny/app-page-builder/types”;

export const HeaderMenuContent = {

empty: {

    link: "",

    title: ""

},

WhyUs: {

    link: "whyBitLabs",

    title: "Why bitLabs"

},

HowItWorks: {

    link: "howItWorks",

    title: "How it works"

},

Curriculam: {

    link: "curriculam",

    title: "Curriculam"

},

Placements: {

    link: "placements",

    title: "Placements"

},

FAQs: {

    link: "bitLabsFAQs",

    title: "FAQs"

},

AboutUs: {

    link: "aboutUs",

    title: "About Us"

},

KnowMore: {

    link: "joinWaitList",

    title: "Know More"

}

};

export default () => {

return {

    name: "pb-render-page-element-bitLabs-header",

    type: "pb-render-page-element",

    elementType: "bitLabs-header",

    render(props) {

        return <HeaderMenu {...props} />;

    }

};

};

const outerWrapper = css({

boxSizing: "border-box",

maxWidth: "1252px"

});

const HeaderMenu = () => {

const [showMenu, setShowMenu] = useState(false);

useEffect(() => {

    if (typeof window !== undefined) {

        setShowMenu(true);

    }

}, []);

if (showMenu) {

    return (

        <div className={"webiny-pb-base-page-element-style " + outerWrapper}>

            <div

                className="webiny-pb-base-page-element-style webiny-pb-layout-row"

                style={{

                    justifyContent: "space-between",

                    display: "flex",

                    flexDirection: "row",

                    alignItems: "center"

                }}

            >

                <div

                    className="webiny-pb-base-page-element-style webiny-pb-layout-column"

                    style={{

                        width: "150px !important",

                        margin: "0px 2.5rem 0px 2rem"

                    }}

                >

                    <div

                        className="webiny-pb-base-page-element-style webiny-pb-page-element-image"

                        style={{

                            textAlign: "left !important"

                        }}

                    >

                        <img

                            title="bitLabs-logo"

                            alt="bitLabs-logo"

                            src={require("./assets/logo.png")}

                            style={{

                                width: "150px"

                            }}

                        />

                    </div>

                </div>

                <div className="webiny-pb-bitLabs-standard-menu">

                    <StandardMenuItem content={HeaderMenuContent.WhyUs} />

                    <StandardMenuItem content={HeaderMenuContent.HowItWorks} />

                    <StandardMenuItem content={HeaderMenuContent.Curriculam} />

                    <StandardMenuItem content={HeaderMenuContent.Placements} />

                    <StandardMenuItem content={HeaderMenuContent.FAQs} />

                    <StandardMenuItem content={HeaderMenuContent.AboutUs} />

                </div>

                <div className="webiny-pb-bitLabs-list-style-menu">

                    <Menu

                        handle={

                            <button

                                className={

                                    "webiny-pb-base-page-element-style " +

                                    "webiny-pb-page-element-button " +

                                    "webiny-pb-page-element-button--bitLabs-simple " +

                                    "webiny-pb-bitLabs-list-menu"

                                }

                            ></button>

                        }

                    >

                        <ListMenuItem content={HeaderMenuContent.WhyUs} showMenu={showMenu} />

                        <ListMenuItem

                            content={HeaderMenuContent.HowItWorks}

                            showMenu={showMenu}

                        />

                        <ListMenuItem

                            content={HeaderMenuContent.Curriculam}

                            showMenu={showMenu}

                        />

                        <ListMenuItem

                            content={HeaderMenuContent.Placements}

                            showMenu={showMenu}

                        />

                        <ListMenuItem content={HeaderMenuContent.FAQs} showMenu={showMenu} />

                        <ListMenuItem content={HeaderMenuContent.AboutUs} showMenu={showMenu} />

                        <ListMenuItem

                           content={HeaderMenuContent.KnowMore}

                             showMenu={showMenu}

                        />

                    </Menu>

                </div>

                <div className="webiny-pb-bitLabs-menu-empty-container">

                    <StandardMenuItem content={HeaderMenuContent.empty} />

                </div>

                <div className="webiny-pb-bitLabs-standard-menu">

                    <StandardMenuItem content={HeaderMenuContent.KnowMore} btnStyle="primary" />

                </div>

            </div>

        </div>

    );

} else {

    return <></>;

}

};

const StandardMenuItem = (props) => {

return (

    <div

        className="webiny-pb-base-page-element-style webiny-pb-layout-column"

        style={{

            paddingTop: !!props.btnStyle && props.btnStyle === "primary" ? "0%" : "5px"

        }}

    >

        <div

            style={{

                display: "flex"

            }}

        >

            {!!props.btnStyle && props.btnStyle === "primary" ? (

                <ComplexButton {...props} />

            ) : (

                <SimpleButton {...props} />

            )}

        </div>

    </div>

);

};

const ListMenuItem = (props) => {

if (props.showMenu) {

    return (

        <a

            href={"#" + props.content.link}

            className="webiny-pb-page-element-button--bitLabs-simple "

        >

            <MenuItem>{props.content.title}</MenuItem>

        </a>

    );

} else {

    return <></>;

}

};

const SimpleButton = (props) => {

return (

    <a

        className={

            "webiny-pb-base-page-element-style " +

            "webiny-pb-page-element-button " +

            "webiny-pb-page-element-button--bitLabs-simple "

        }

        href={"#" + props.content.link}

    >

        {props.content.title}

    </a>

);

};

const ComplexButton = (props) => {

return (

    <a

        className={

            "webiny-pb-base-page-element-style " +

            "webiny-pb-page-element-button " +

            "multi-color-btn "

        }

        href={"#" + props.content.link}

    >

        <div className="multi-color-btn-content">{props.content.title}</div>

    </a>

);

};
style.scss:
body {

.webiny-pb-page {

    .webiny-pb-page-element-button {

        text-transform: capitalize;

        font-size: 16px;

        font-family: "Roboto", sans-serif;

        font-weight: 500;

        &:hover {

            text-decoration: none;

        }

        &--bitLabs-simple {

            background-color: transparent;

            color: #ffffff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

    }

    .multi-color-btn {

        padding: 2px !important;

        display: inline-block;

        border-radius: 24px;

        height: 52px;

        width: 153px;

        background: linear-gradient(150deg, #ffae2a, #f28222, #e75b1a, #ed711e);

        .multi-color-btn-content {

            background: #151519;

            color: #ffffff;

            padding: 13px;

            border-radius: 24px;

            font: bold 18px "Roboto", sans-serif;

        }

        &:active .bg {

            background: #0a1117;

            color: #ffffff;

        }

    }

    .webiny-pb-bitLabs-menu-empty-container {

        display: flex;

        flex: 1 1 auto;

        justify-content: space-around;

    }

    .webiny-pb-bitLabs-standard-menu {

        display: flex;

        flex: 1 1 auto;

        justify-content: space-around;

    }

    .webiny-pb-bitLabs-menu-contacts-container {

        display: flex;

    }

    .webiny-pb-bitLabs-list-style-menu {

        display: none;

        .webiny-pb-bitLabs-list-menu {

            width: 24px;

            height: 24px;

            content: "";

            background-image: url("./assets/baseline-menu-24px.svg");

            background-size: cover;

        }

    }

    @media (max-width: 910px) and (min-width: 0px) {

        .webiny-pb-bitLabs-standard-menu {

            display: none;

        }

        .webiny-pb-bitLabs-menu-empty-container {

            display: none;

        }

        .webiny-pb-bitLabs-list-style-menu {

            display: block;

            padding: 0rem 2rem;

        }

    }

}

.mdc-menu {

    min-width: 150px;

    .webiny-pb-bitLabs-last-item {

        display: none;

    }

    .webiny-pb-page-element-button {

        text-transform: capitalize;

        font-size: 16px;

        font-family: "Roboto", sans-serif;

        font-weight: 500;

        &:hover {

            text-decoration: none;

        }

        &--bitLabs-primary {

            background-color: transparent;

            color: #fff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

        &--bitLabs-simple {

            background-color: transparent;

            color: #fff;

            padding: 0 !important;

            min-width: 0;

            &:hover {

                box-shadow: none;

                transform: none;

            }

        }

    }

    @media (max-width: 767px) and (min-width: 0px) {

        .webiny-pb-bitLabs-last-item {

            display: block;

        }

    }

}

}

Hey @nagababu, will let you know once I set up your code on my project. For future posts, please use the code block element on the editor to include all the code of one file.

1 Like

Please use tripple backticks ``` at the beginning and end of your code to properly highlight multiline code.

1 Like