Avatar of Crystal Rouse
Crystal Rouse
Flag for United States of America

asked on 

Need help formatting a drop-down Menu used on a React.jsx

I have a React.jsx View that includes a Menu bar at the top of the page.  I need to add a dropdown-menu and would like to use the caret symbol.  
I'm not sure how to add this to the scss file or the react file.

My MenuBar.scss file has:

div.MenuBar {
    background-color: rgba(0, 0, 0, .5);
    color: white;
    line-height: $menuHeight;
    border-radius: 3px;
    border: 2px solid black;

    .MenuOption, .MenuDropdown {
        display: inline-block;
        font-weight: bold;
        cursor: pointer;
        padding: 0 calc(#{$menuHeight} / 2);

        &:hover:not(.NotificationOption) {
            background-color: rgba(0, 0, 0, .75);
        }

        &.MenuOptionRight {
            float: right;
        }

        &.selected {
            color: azure;
            font-style: italic;
            cursor: not-allowed;

            &:hover {
                background-color: transparent;
            }
        }
    }

    .MenuDropdown {
        position: relative;

        & > .options {
            position: absolute;
            top: $menuHeight;
            left: 20px;
            z-index: 9000;
            width: 210px;
            background-color: rgba(0, 0, 0, .75);
            border-radius: 3px;
            border: 2px solid black;

            .MenuOption {
                display: block;
            }
        }
    }
}

My React.js file has:

 _getMenu() {

var tmpOps = [];

        tmpOps.push(
            <MenuOption onClick={() => this.go(this.urls.URLGOESHERE)}
                key="URLLink">
                URL TEXT
                </MenuOption>
        ),

            tmpOps.push(
                <MenuOption onClick={() => this.go(this.urls.LINKGOESHERE)}
                    key="URLLink">
                    ANOTHER LINK
                </MenuOption>
            );

        menuOps.push(
            <MenuOption drop
                options={tmpOps}
                key="KeyText">
                DROPDOWN LINK TEXT
                </MenuOption>
        );

 return menuOps;
    },

Of course there are a lot more links but this snippet shows a drop-down menu that I want to add the additional caret symbol to.  Not sure how to proceed.  I'm really new to React and styling.
I inherited this code.  Thanks for any help!
CSSC#* ReactJS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon