I am currently using a Material-UI button with the following code:
<Button
disableFocusRipple={true}
disableRipple={true}
color="inherit"
onClick={openBlogMenu}
className={classes.blogButtonStyle}
>
<LibraryBooksIcon />
Blog
{!blogMenu && <KeyboardArrowDownIcon />}
{blogMenu && <KeyboardArrowUpIcon />}
</Button>
<BlogDropDown pageURL={pageURL} />
In this setup, the openBlogMenu function alters the state of blogMenu in Redux which controls the visibility of the BlogDropDown. Additionally, I use this state to toggle between two arrow icons, KeyboardArrowDownIcon and KeyboardArrowUpIcon.
While this system is functioning well, I want to enhance it by eliminating the need for the KeyboardArrowUpIcon entirely. Instead, I would like the KeyboardArrowDownIcon to rotate 180 degrees when clicked.
I understand that one way to achieve this is by adding a pseudo-class such as :active or :focus to the icon element. However, this method only rotates the icon itself upon click rather than the entire button.
An alternative solution could be dynamically applying a transform attribute (transform: rotate(180deg);) to the icon's CSS within the click handler. Nevertheless, this approach might lack smooth animation during transition.
Any suggestions on how to implement this?
P.S.: To better visualize my objective, you can refer to the menu option More on