const passwordRef = useRef(null);
const usageRef = useRef(null);
const [isMoved, setIsMoved] = useState(false);
<div className={`${Styles.form} ${isMoved && Styles.moved}`}>
<div className={Styles.fst} />
<div className={`${Styles.firstSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
<button
className={`${Styles.exit}`}
onClick={removeNewPasswordForm}> <i className="fas fa-times"/> </button>
<input
ref={usageRef}
autoFocus={true}
placeholder={"Usage"} type="text"
className={Styles.usageInput}/>
<button
className={`${Styles.arrow} ${Styles.toWritePassword}`}
onClick={() => {setIsMoved(true)}}> <i className="fas fa-angle-right"/> </button>
</div>
<div className={`${Styles.secondSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
<button
className={`${Styles.arrow} ${Styles.toWriteUsage}`}
onClick={() => setIsMoved(false)}> <i className="fas fa-angle-left"/> </button>
<input
ref={passwordRef}
placeholder={"Password"} type="text"
className={Styles.passwordInput}/>
<button
className={`${Styles.arrow} ${Styles.continue}`}
onClick={confirmNewPassword}> <i className="fas fa-angle-double-right"/> </button>
</div>
</div>
.form {
display: flex;
justify-content: left;
overflow: hidden;
width: 30vw;
box-sizing: border-box;
padding: 17.6px 0px;
}
.form input {
width: calc(30vw * 0.7);
margin: 0 auto;
padding: 7px 5px;
}
.slide {
display: grid;
grid-template-columns: 2em 1fr 2em;
min-width: 30vw;
transition: 0.6s;
}
.moved {
padding-right: 30vw;
}
.slide.moved{
margin-left: -30vw;
}
.arrow, .exit {
padding: 0 5px
}
.arrow {
font-size: 1.1em;
}
/*media requests for slides*/
@media screen and (max-width: 1200px){
.form {
width: 45vw;
}
.slide {
min-width: 45vw;
max-width: 45vw;
}
.slide.moved{
margin-left: -45vw;
}
}
@media screen and (max-width: 950px){
.form {
width: 55vw;
}
.slide {
min-width: 55vw;
}
.slide.moved{
margin-left: -55vw;
}
}
@media screen and (max-width: 750px){
.form {
width: 65vw;
}
.slide {
min-width: 65vw;
}
.slide.moved{
margin-left: -65vw;
}
}
@media screen and (max-width: 600px){
.form {
width: 100vw;
padding: 0;
}
.slide {
min-width: 100vw;
max-width: 100vw;
}
.slide.moved{
margin-left: -0vw;
}
}