I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it. How can I ensure that the second button slides down after the dropdown content is opened?
Here is my current approach:
MenuBarGame.js
import React , {useState} from 'react'
import css from '../components/css/MenuBarGame.css'
import Logo from '../logo.png'
function MenuBarGame(props){
const [click, setClick] = useState(false);
function handleDropdown() {
if(click == false){
setClick(true);
}
else{
setClick(false)
}
}
return(
<>
<div>
<li>
<button className="gameButton" onClick={handleDropdown}><img src={Logo}/> {props.data.name}</button>
{click?
<div class="dropdown-content">
<button>* Duel</button>
<button>* Events</button>
<button>* Leaderboard</button>
</div>:null}
</li>
</div>
</>
)
}
export default MenuBarGame
MenuBarGame.css
.MenuBarGame{
margin-top: 10px;
display: flex;
justify-content: center;
align-content: center;
color: white;
}
.MenuBarGame ul{ /*Styles for the area containing the game tabs*/
padding: 0px 1.5em 0px 1.5em;
height: 15px;
}
.MenuBarGame ul li { /*Individual styles for each game tab*/
display:flex;
margin-bottom: 10px;
}
.MenuBarGame ul li img { /*Styling for images*/
border: 1px solid #0ab74c;
border-radius: 100%;
width:2em;
height:2em;
margin-right: 15px;
vertical-align: middle;
}
.gameButton { /*Styles for game buttons*/
color: white;
border: 1px solid transparent;
height: fit-content;
width: 150px;
padding: 10px;
cursor: pointer;
display: table-cell;
font-size: 14px;
background-color: #1c3527;
position: relative;
}
.dropdown-content {
display: flex;
position: absolute;
margin-top: 60px;
width: 100%;
background-color:#343438;
flex-flow: column nowrap;
}
.dropdown-content a{
display: flex;
color: white;
padding: 16px 4px;
text-decoration: none;
flex-flow: column nowrap;
align-items: center;
}
.dropdown-content button {
text-align: left;
margin-left: 15px;
}
.dropdown-content a:hover {cursor: pointer;}
Implementation in the dashboard component:
Dashboard.js
<div className="MenuBarGame">
<ul>
<MenuBarGame data={{name:"Game1"}}></MenuBarGame>
<MenuBarGame data={{name:"Game2"}}></MenuBarGame>
</ul>
</div>