Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Outlet, useMatch } from 'react-router-dom'

import { Grid } from '@mui/material'

import Menu from '@components/habits/HabitsMenu'

import HabitsUrlsProvider from '@providers/habits/habitsUrls'

import './habits.css'

export default function HabitsLayout() {

  const matchHabits = useMatch('/habits/habits')

  const matchGoals = useMatch('/habits/goals')

  const matchPurposes = useMatch('/habits/purposes')

  const matchParadigms = useMatch('/habits/paradigms')

  const matchValues = useMatch('/habits/values')

  return (

    <Grid container spacing={2}>

      <Grid item xs={12} md={4}>

        <Menu>

          {matchGoals ||

            (matchHabits && (

              <>

                <Menu.Item to='/habits/habits' label='Hábitos' />

                <Menu.Item to='/habits/goals' label='Metas' />

                <Menu.Item to='/habits/purposes' label='Metas' />

              </>

            ))}

          {matchPurposes ||

            matchParadigms ||

            (matchValues && (

              <>

                <Menu.Item to='/habits/habits' label='Hábitos' />

                <Menu.Item to='/habits/purposes' label='Propósitos' />

                <Menu.Item to='/habits/paradigms' label='Paradigmas' />

                <Menu.Item to='/habits/values' label='Valores' />

              </>

            ))}

        </Menu>

      </Grid>

      <Grid item xs={12} md={8}>

        <HabitsUrlsProvider>

          <Outlet />

        </HabitsUrlsProvider>

      </Grid>

    </Grid>

  )

}