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>
  )
}