I have two components, a form and a sidebar, I want to let my sidebar stay on the screen and when I add data to the form and save as I insert the sidebar do not "move". In that link ( link ) is how is the sidebar and the form, when I move in the css of the sidebar to change some configuration unconfigures everything place form. Can someone help me??
Form Css:
.list-wrapper {
width: 112%;
height: 100%;
background: url('./images/background.jpg');
padding: 100px;
margin-top: -18.4cm;
margin-left: -3.5cm;
}
.card {
margin-top: 15px;
background: #fff;
box-shadow: 0 5px 5px #ccc;
width: 100%;
height: 125px;
padding: 10px;
}
.card-title {
font-size: 2em;
font-weight: 100;
line-height: 1.5em;
}
.card-subtitle {
font-size: 1.3em;
font-weight: 500;
color: #999;
}
Sidebar css:
.sibebar-navegacao {
position: fixed;
width: 250px;
height: 100%;
left: 0;
}
.menu-item {
display: block;
width: 9%;
height: 35vh;
padding: 13px;
background-color: #4682B4;
color: #54FF9F;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.4em;
text-decoration: none;
}
Sidebar:
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { auth } from './base'
import './sidebar.css'
class Sidebar extends Component {
render(props){
return(
<nav className='sidebar-navegacao'>
<NavLink className='menu-item' to={'/admin/professor'}>PROFESSOR</NavLink>
<NavLink className='menu-item' to={'/admin/turma'}>TURMA</NavLink>
<NavLink className='menu-item' to={'/admin/disciplina'}>DISCIPLINA</NavLink>
</nav>
)
}
}
export default Sidebar
Form:
<div className='list-wrapper'>
<form onSubmit={this.handleSave}>
<InputField
refValue={ref => this.docente = ref}
idValue='docente'
typeValue='text'
requiredValue={true}
label='Docente'
spanWidth="120px"
/>
<InputField
refValue={ref => this.disciplina = ref}
idValue='disciplina'
typeValue='text'
requiredValue={true}
label='Disciplina'
spanWidth="80px"
/>
<button type='submit'>Salvar Dados </button>
</form>