import Menu from "@/components/Menu"
import Guards from "@/components/Navigation"
import { iMenuItem, RouteModel } from "@/types/router"
import { combinationPath } from "@/utils/util"
import React from 'react'
import { Switch } from 'react-router-dom'
import styles from './index.module.scss'
export default function NavSide(props: any) {
  const { routeConfig, match } = props

  const menuList: iMenuItem[] = routeConfig?.filter((item: RouteModel) => item.meta).map((item: RouteModel) => {
    return { path: combinationPath(match.path, item.path), ...item.meta }
  })

  return (
    <div className="pi-flex-row pi-height-100P">
      <Menu list={menuList}></Menu>
      <div className={[ 'pi-flex-row', 'pi-height-100P', styles.layout ].join(' ')}>
        <Switch>
          <Guards routeConfig={routeConfig} match={match}></Guards>
        </Switch>
      </div>
    </div>
  )
}