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!