<>
<SidebarBody
logoURL="https://dev.drenagem.geovista.com.br/api/static/icones/logo.png"
titlesBackground="#868686"
titlesColor="#ffffff"
titlesBorderColor="#868686"
NavigationMenuIcon={["fas fa-user", "fas fa-search", "fas fa-marker", "fas fa-map"]}
>
<div>
<div className="SidebarContentModel" value="Titulo 1">
<ChartModel
mode="pie"
title={"Gráfico Pizza"}
labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
datas={[12, 19, 3, 5, 2, 3]}
colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
responsive={false}
legend={true}
/>
</div>
<div className="SidebarContentModel" value="Titulo 2">
<ChartModel
mode="bar"
title={"Gráfico Barra"}
labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
datas={[12, 19, 3, 5, 2, 3]}
colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
responsive={false}
legend={true}
/>
</div>
<div className="SidebarContentModel" value="Titulo 3">
<ChartModel
mode="doughnut"
title={"Gráfico Torta"}
labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
datas={[12, 19, 3, 5, 2, 3]}
colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
responsive={false}
legend={true}
height={700}
/>
</div>
</div>
<div value="Teste 1"><div>1234567</div></div>
<div value="Teste 2">fsaljbfsaoif</div>
<div value="Teste 3">abcdefghi</div>
</SidebarBody>
<ButtonsHUB >
<SidebarButtons icon="fas fa-exchange" function="toggleSidebar" />
<SidebarButtons icon="fas fa-print" function="printScreen" />
</ButtonsHUB>
</>
Caso não queira espaço de logo somente é necessário não colocar o campo logoURL
nos Props.
O Campo NavigationMenuIcon
é necessário para inserir via classe os ícones FontAwesome versão 5.15.4, caso contrário aparecerá um ícone de alerta no local.