Tengo en mi página Home un menú donde están el menú de navegación, entonces cuando está en Home verifica si el Id del usuario está nulo o no. Si no está nulo (si la sesión ya se inició entonces "show" se pone en verdadero y tiene que mostrarse el menú de navegación, de lo contrario, pues falso y no lo muestra. A continuación el código:
import React, { useEffect, useState } from 'react';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
import Login from './Login';
import Logout from "./Logout";
import { Routes, Route, useNavigate } from "react-router-dom";
const Home = () =>{
const navigate=useNavigate();
const [show, setShow]=useState(Boolean);
useEffect(()=>{
let idusario=sessionStorage.getItem("Iduser");
if(idusario==="" || idusario===null || idusario===undefined){
setShow(false);
navigate("/login");
}
else{
setShow(true);
}
}, []);
return (
<div className="container">
<nav className="navbar navbar-expand navbar-light bg-light">
<div className="nav navbar-nav">
<a className="navbar-brand" href="/Home">
<img src={Logo}></img>
</a>
<div className="dropdown">
<a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownCatalogos" data-bs-toggle="dropdown" aria-expanded="false">
Opcion
</a>
<ul className="dropdown-menu" aria-labelledby="dropdownCatalogos">
<li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
<li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
<li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
</ul>
</div>
<div className="dropdown">
<a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownRecepción" data-bs-toggle="dropdown" aria-expanded="false">
Opcion
</a>
<ul className="dropdown-menu" aria-labelledby="dropdownRecepción">
<li><a className="dropdown-item" href="/x">Opcion</a></li>
</ul>
</div>
<div className="dropdown">
<a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
Opcion
</a>
<ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
<li><a className="dropdown-item" href="/x">Opcion</a></li>
</ul>
</div>
<div className="dropdown">
<a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
Opcion
</a>
<ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
<li><a className="dropdown-item" href="/x">Opcion</a></li>
</ul>
</div>
<div className="dropdown">
<a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownHistorialMedico" data-bs-toggle="dropdown" aria-expanded="false">
Opcion
</a>
<ul className="dropdown-menu" aria-labelledby="dropdownHistorialMedico">
<li><a className="dropdown-item" href="/x">Opcion</a></li>
</ul>
</div>
</div>
<ul className="navbar-nav">
<li className="nav-item">
<a className="text-black mt-5 mb-5">Opcion(a):<b>{sessionStorage.getItem("x")}</b></a>
</li>
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link d-block" href="/logout">
<b>Opcion</b>
</a>
</li>
</ul>
</ul>
</nav>
<br></br>
<Routes>
<Route path="/opcion..." element={<opcion />} />
<Route path="/opcion..." element={<opcion />} />
<Route path="/opcion..." element={<opcion />} />
<Route path="/opcion..." element={<opcion />} />
</Routes>
</div>
);
}
export default Home;
El problema es que no se, donde poner el "show" para que oculte todo el menú y sus opciones para esto, intente:
- Poner un div, encerrando todo el menú donde en el ClasName={show} pues hacer dicha acción (y hacer visible o no desde el "container" hasta la ultima opción visible o no, pero no funcionó.
El menú es un dropdown de bootstrap 5. No soy un experto en FE y por lo tanto no encuentro una respuesta sencilla. ¿Alguien sabe cómo hacerlo?. Saludos y gracias.