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='Propósitos' />
            </>
          )}
          {(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>
  )
}