JSFiddle - React, Tailwind, and code Playground
JavaScript
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from "react";
import "./sideBar.css";
import api from "../../services/api";
import { NavLink } from "react-router-dom";
class SideBar extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
toogle: 'show'
};
}
componentDidMount() {
this.verificaAdmin();
this.interval = setInterval(() => {
if (sessionStorage.length < 3) {
sessionStorage.clear();
window.location.href = "/";
}
}, 2000);
this.disconnect = setTimeout(() => {
sessionStorage.clear();
window.location.href = "/";
}, 2000000);
}
verificaAdmin = async () => {
var role = sessionStorage.getItem("role");
const response = await api.get(`/role/listar/${role}`);
if (response.data.data.nome !== "admin") {
let {show, toogle} = this.state;
show = !show;
toogle = show ? 'block': 'none';
this.setState({
show,
toogle
});
}
};
logout = () => {
sessionStorage.clear();
window.location.href = "/";
};
render() {
const {toogle} = this.state;
return (
<nav class="main-menu">
<ul>
<li>
<a>
<i class="img-sidebar">
<img src="https://www.lyceum.com.br/wp-content/uploads/2018/09/cropped-midias_azul_png-32x32.png"></img>
</i>
<span class="nav-text-title">Lyceum</span>
</a>
</li>
<hr></hr>
<NavLink to="/user/avaliacoes">
<li>
<a>
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">Avaliacoes</span>
</a>
</li>
</NavLink>
<NavLink
to="/admin/usuarios"
id="adminUser"
style={{ textDecoration: "none", display: toogle }}
>
...