-1
How to make calling the action . Burger:active change the style of the menu component on the same hierarchical level
Components/Nav/index.js
import React from "react";
import { NavContainer } from "./styles";
export default function Nav() {
return (
<NavContainer>
<div className="logo">Logo</div>
<ul className="menu">
<li>
<a href="/">Menu1</a>
</li>
<li>
<a href="/">Menu2</a>
</li>
<li>
<a href="/">Menu3</a>
</li>
</ul>
<div className="burger">
<div className="linha1" />
<div className="linha2" />
<div className="linha3" />
</div>
</NavContainer>
);
}
Components/Nav/Styles.js
import styled from "styled-components";
export const NavContainer = styled.nav`
display: flex;
flex-direction: row;
justify-content: space-between;
background: darkgray;
align-items: center;
min-height: 8vh;
ul {
display: flex;
list-style: none;
justify-content: space-between;
width: 30%;
}
.burger {
display: none;
}
.burger div {
background: white;
width: 25px;
height: 4px;
margin: 3px;
border-radius: 2px;
}
.burger:active {
.linha1 {
margin: 0;
transform: rotate(45deg);
}
.linha2 {
margin: 0;
display: none;
}
.linha3 {
margin: 0;
transform: rotate(-45deg);
}
.menu {
transform: translateX(0%);
background: red;
}
}
@media screen and (max-width: 700px) {
.burger {
display: block;
}
ul {
justify-content: space-around;
position: absolute;
top: 8vh;
right: 0px;
flex-direction: column;
align-items: center;
height: 92vh;
background: darkgray;
transform: translateX(100%);
}
}
`;
To get around this situation I created a stylized class where a toggle is given in the menu via the Burger click event.
Thanks friend, I managed to get around my need through js, where in the click event I add or retreat a stylized class. But your answer helped me a lot. Thank you very much!
– Bruno Henrique