add a back to porfolio link to folder tree component

This commit is contained in:
Triston Armstrong 2023-12-25 19:27:55 -06:00
parent ba483eb27d
commit 90bddfde70

View File

@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { Divider } from '@mui/material';
const TCTreeItem = styled(TreeItem)(({ theme }) => ({ const TCTreeItem = styled(TreeItem)(({ theme }) => ({
'& .MuiTreeItem-content': { '& .MuiTreeItem-content': {
@ -30,22 +31,26 @@ export default function FolderTree(props) {
// const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id}) // const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
const expandedNodes = [props.tree.id] const expandedNodes = [props.tree.id]
return ( return (
<TreeView <>
aria-label="rich object" <a href='http://localhost:3000'>{"<-"} Back To Portfolio</a>
defaultCollapseIcon={<ExpandMoreIcon />} <Divider />
defaultExpanded={expandedNodes} <TreeView
defaultExpandIcon={<ChevronRightIcon />} aria-label="rich object"
onNodeSelect={(event, nodIds) => { defaultCollapseIcon={<ExpandMoreIcon />}
const currentNode = props.flattenNodes.find(aNode => { defaultExpanded={expandedNodes}
return aNode.id === nodIds defaultExpandIcon={<ChevronRightIcon />}
}) onNodeSelect={(event, nodIds) => {
if (currentNode != null && currentNode.routePath != null) { const currentNode = props.flattenNodes.find(aNode => {
router.push(currentNode.routePath) return aNode.id === nodIds
} })
}} if (currentNode != null && currentNode.routePath != null) {
sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} router.push(currentNode.routePath)
> }
{renderTree(props.tree)} }}
</TreeView> sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
{renderTree(props.tree)}
</TreeView>
</>
); );
} }