Link to home
Start Free TrialLog in
Avatar of Crystal Rouse
Crystal RouseFlag 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!
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial