Crea el menu a opartir de sus credenciales de acceso

src/App.tsx

@@ -25,7 +25,7 @@ function App() {
     )
   }
 
-  const ProtectedRoute = ({ auth = false, redirectPath = '/login' }) => {
+  const ProtectedRoute = ({ auth = false, redirectPath = 'login' }) => {
     if (!auth) {
       return <Navigate to={redirectPath} replace />
     }

src/Components/Login/Login.tsx

@@ -27,6 +27,7 @@ export const Login: FC<IProps> = (props) => {
     DSAuth.login(data)
       .then((response) => {
         localStorage.setItem('token', response.data.token)
+        localStorage.setItem('menu', JSON.stringify(response.data.menu))
         setToken(response.data.token)
         dispatch(populateMenuItems(response.data.menu))
         dispatch(populateUserProfile(response.data.token))
@@ -42,7 +43,7 @@ export const Login: FC<IProps> = (props) => {
       DSAuth.Validate()
         .then((response) => {
           dispatch(populateUserProfile(token))
-          navigate('../RptViajesPendientes', { replace: true })
+          navigate('../Home', { replace: true })
         })
         .catch((e: Error) => {
           // navigate('login', { replace: true })

src/Components/Logout/Logout.tsx

@@ -15,10 +15,12 @@ export const Logout: FC<IProps> = (props) => {
 
   useEffect(() => {
     localStorage.removeItem('token')
-    localStorage.setItem('token', '')
+    localStorage.removeItem('menu')
+    //localStorage.setItem('token', '')
+    //localStorage.setItem('menu', '')
     dispatch(populateUserProfile(''))
     //alert('debe regresar al login')
-    window.location.href = 'http://localhost:3000/login'
+    window.location.href = 'http://localhost:3000'
   }, [])
 
   const ValidateToken = () => {
@@ -26,11 +28,11 @@ export const Logout: FC<IProps> = (props) => {
       DSAuth.Validate()
         .then((response) => {
           dispatch(populateUserProfile(''))
-          window.location.href = 'http://localhost:3000/login'
+          window.location.href = 'http://localhost:3000'
         })
         .catch((e: Error) => {
           console.log('Debe de salir al login')
-          window.location.href = 'http://localhost:3000/login'
+          window.location.href = 'http://localhost:3000'
         })
     }
   }

src/Components/Navbar/Navbar.tsx

@@ -1,17 +1,73 @@
-import { Container, Navbar } from 'react-bootstrap'
+import { useEffect, useState } from 'react'
+import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import IMenu from '../../Interfaces/Auth/IMenu'
 import { RootState } from '../../store/store'
 
+interface Isubmenu {
+  menu: IMenu[]
+  descripcion: string
+}
+
+function Submenu({ descripcion, menu }: Isubmenu) {
+  return (
+    <div>
+      <NavDropdown title={descripcion} id='basic-nav-dropdown'>
+        {menu.map((item, index) => {
+          return (
+            <NavDropdown.Item href={item.url} key={item.url}>
+              {item.descripcion}
+            </NavDropdown.Item>
+          )
+        })}
+      </NavDropdown>
+    </div>
+  )
+}
+
 function AOLNavbar() {
+  //const MenuItems = useSelector((state: RootState) => state.MenuItems.MenuItems)
+  let _menu: IMenu[] = []
+  let mn: string = ''
+  const [menu, setMenu] = useState(localStorage.getItem('menu') ? localStorage.getItem('menu') : '')
+  const [mainMenu, setMainMenu] = useState(_menu)
   const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
   const User = useSelector((state: RootState) => state.UserProfile.UserProfile.User)
 
+  useEffect(() => {
+    if (menu) {
+      setMainMenu(JSON.parse(menu))
+    }
+  }, [menu])
+
   return (
     <Navbar bg='light'>
       <Container>
         <Navbar.Brand href='#home'>AOL</Navbar.Brand>
         <Navbar.Toggle />
+        <Navbar.Collapse id='basic-navbar-nav'>
+          <Nav className='me-auto'>
+            {mainMenu
+              ? mainMenu.map((itemMenu, index) => {
+                  if (itemMenu.padreId === 0) {
+                    return (
+                      <>
+                        <Submenu
+                          descripcion={itemMenu.descripcion}
+                          key={itemMenu.id}
+                          menu={mainMenu.filter(function (item) {
+                            return item.padreId === itemMenu.id
+                          })}
+                        />
+                      </>
+                    )
+                  }
+                })
+              : ''}
+          </Nav>
+        </Navbar.Collapse>
+
         <Navbar.Collapse className='justify-content-end'>
           {UserLogued ? (
             <Navbar.Text>

src/store/features/Auth/MenuItemsSlice.ts

@@ -8,8 +8,12 @@ export const MenuItemsSlice = createSlice({
   initialState: initialState,
   reducers: {
     populateMenuItems : (state, action: PayloadAction<IMenu[]>) => {
-      state.MenuItems = [{ id:0, descripcion:'', padreId:0, posicion:0, url:''}]
-      state.MenuItems.push(... action.payload)
+      //alert('populate IMenu '+JSON.stringify(action.payload))
+     // state.MenuItems = [{ id:0, descripcion:'', padreId:0, posicion:0, url:''}]
+     // state.MenuItems.push(... action.payload)
+     action.payload.forEach(element => state.MenuItems.push(element));
+    /*  if (action.payload.length>0)
+     state.MenuItems.push(... action.payload) */
     },
   },
 })