tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed styling issue on Nav bar

Browse Source
This commit is contained in:
Tuan Cao 2022-04-19 11:39:51 +07:00
parent 99975d316c
commit 81b82fa5bc
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/FolderTree.js
View File

@ -4,22 +4,27 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import TreeItem from '@mui/lab/TreeItem'; import TreeItem from '@mui/lab/TreeItem';
import {useRouter} from 'next/router' import {useRouter} from 'next/router'
import {styled} from '@mui/material/styles';
export default function FolderTree(props) { const TCTreeItem = styled(TreeItem)(({theme}) => ({
const renderTree = (nodes) => ( '& .MuiTreeItem-content': {
<TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} '& .MuiTreeItem-label': {
sx={{'& .MuiTreeItem-label': {
fontSize: '1rem', fontSize: '1rem',
paddingLeft: '6px', paddingLeft: '6px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
lineHeight: 2.0 lineHeight: 1.8,
}, },
}} },
> }))
export default function FolderTree(props) {
const renderTree = (nodes) => (
<TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
{Array.isArray(nodes.children) {Array.isArray(nodes.children)
? nodes.children.map((node) => renderTree(node)) ? nodes.children.map((node) => renderTree(node))
: null} : null}
</TreeItem> </TCTreeItem>
); );
const router = useRouter() const router = useRouter()
@ -32,7 +37,9 @@ export default function FolderTree(props) {
defaultExpanded={expandedNodes} defaultExpanded={expandedNodes}
defaultExpandIcon={<ChevronRightIcon/>} defaultExpandIcon={<ChevronRightIcon/>}
onNodeSelect={(event, nodIds) => { onNodeSelect={(event, nodIds) => {
const currentNode = props.flattenNodes.find(aNode => {return aNode.id === nodIds}) const currentNode = props.flattenNodes.find(aNode => {
return aNode.id === nodIds
})
// console.log(event) // console.log(event)
// console.log(currentNode) // console.log(currentNode)
if (currentNode != null && currentNode.routePath != null) { if (currentNode != null && currentNode.routePath != null) {