title: Nested sidebar menu with material ui and Reactjs
body: <p>I am trying to develop a sidebar menu using material ui. I am able to make it for simple list. In my project I have a requirement of nested sidebar menu which I am not able to achieve. If I am trying to use recursive function it is providing only main title menu and not rendering child elements. Please help me develop it.</p>
  <p>The code for nested sidebar menu is as below,</p>
  <pre><code>import React, {useState} from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import Collapse from '@material-ui/core/Collapse';
  import ExpandLess from '@material-ui/icons/ExpandLess';
  import ExpandMore from '@material-ui/icons/ExpandMore';
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
    },
    nested: {
      paddingLeft: theme.spacing(4),
    },
  }));
  
  export const Menu = ({items}) =&gt; {
    const classes = useStyles();
    const [open, setOpen] = useState(true);
  
    const handleClick = () =&gt; {
      setOpen(!open);
    };
  
    return (
      items.map(item =&gt;
        !item.children ? (
            &lt;div key={item.title}&gt;
              &lt;ListItem button&gt;
                &lt;ListItemIcon&gt;
                  {item.icon}
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={item.title} /&gt;
              &lt;/ListItem&gt;
            &lt;/div&gt;
          ) : (
            &lt;div
              component=&quot;nav&quot;
              key={item.title}
            &gt;
              &lt;ListItem button onClick={handleClick}&gt;
                &lt;ListItemIcon&gt;
                  {item.icon}
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={item.title} /&gt;
                {open ? &lt;ExpandLess /&gt; : &lt;ExpandMore /&gt;}
              &lt;/ListItem&gt;
              &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
                &lt;List component=&quot;div&quot; disablePadding&gt;
                  &lt;ListItem button className={classes.nested}&gt;
                    &lt;ListItemIcon&gt;
                      {item.icon}
                    &lt;/ListItemIcon&gt;
                    &lt;ListItemText&gt;
                      &lt;Menu items={item} /&gt;
                    &lt;/ListItemText&gt;
                  &lt;/ListItem&gt;
                &lt;/List&gt;
              &lt;/Collapse&gt;
            &lt;/div&gt;
          )
      )
    );
  }
  </code></pre>
  <p>menu item code is here,</p>
  <pre><code>import HomeOutlinedIcon from &quot;@material-ui/icons/HomeOutlined&quot;;
  import LocalLibraryOutlinedIcon from &quot;@material-ui/icons/LocalLibraryOutlined&quot;;
  import TrendingUpOutlinedIcon from &quot;@material-ui/icons/TrendingUpOutlined&quot;;
  import DescriptionOutlinedIcon from &quot;@material-ui/icons/DescriptionOutlined&quot;;
  import React from &quot;react&quot;;
  
  
  export const menu = [
    {
      icon: &lt;HomeOutlinedIcon/&gt;,
      title: 'Home',
      items: []
    },
    {
      icon: &lt;LocalLibraryOutlinedIcon/&gt;,
      title: 'Education',
      items: [
        {
          title:'Technical Analysis',
          items: [
            {
              title: 'The Dow Theory',
              to: '/thedowtheory'
            },
            {
              title: 'Charts &amp; Chart Patterns',
              to: '/chart'
            },
            {
              title: 'Trend &amp; Trend Lines',
              to: '/trendlines'
            },
            {
              title: 'Support &amp; Resistance',
              to: '/sandr'
            },
          ]
        },
        {
          title:'Fundamental Analysis',
          items: [
            {
              title: 'The Dow Theory',
              to: '/thedowtheory'
            },
            {
              title: 'Charts &amp; Chart Patterns',
              to: '/chart'
            },
            {
              title: 'Trend &amp; Trend Lines',
              to: '/trendlines'
            },
            {
              title: 'Support &amp; Resistance',
              to: '/sandr'
            },
          ]
        },
        {
          title:'Elliot Wave Analysis',
          items: [
            {
              title: 'The Dow Theory',
              to: '/thedowtheory'
            },
            {
              title: 'Charts &amp; Chart Patterns',
              to: '/chart'
            },
            {
              title: 'Trend &amp; Trend Lines',
              to: '/trendlines'
            },
            {
              title: 'Support &amp; Resistance',
              to: '/sandr'
            },
          ]
        },
        ]
    },
    {
      icon: &lt;TrendingUpOutlinedIcon/&gt;,
      title: 'Options'
    },
    {
      icon: &lt;DescriptionOutlinedIcon/&gt;,
      title: 'Blog'
    },
  ]
  </code></pre>