title: Nested menu (sub-menu)
body: <p>I'm trying to implement Sub-menu (nested menu).</p>
  
  <p>It's worth to mention that I'm using hydra component and don't have previous experience with redux (started learning it a few days ago because of this specific problem).</p>
  
  <p>I've followed the example provided on material-ui  for nested list <a href="https://material-ui.com/demos/lists/#nested-list" rel="noreferrer">https://material-ui.com/demos/lists/#nested-list</a>. And tutorial from 
  <a href="https://marmelab.com/react-admin/Theming.html#using-a-custom-menu" rel="noreferrer">https://marmelab.com/react-admin/Theming.html#using-a-custom-menu</a> for custom menu implementation.</p>
  
  <p>So I have a few questions.  </p>
  
  <p>1) Can I have stateful component (MyMenu) just for handling toggling of menu items? </p>
  
  <p>An example is not related to react-admin but its just example what I mean.</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { addArticle } from "../actions/index";
  const mapDispatchToProps = dispatch =&gt; {
    return {
      addArticle: article =&gt; dispatch(addArticle(article))
    };
  };
  class ConnectedForm extends Component {
    constructor() {
      super();
      this.state = {
        title: ""
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
      this.setState({ [event.target.id]: event.target.value });
    }
    handleSubmit(event) {
      event.preventDefault();
      const { title } = this.state;
      const id = uuidv1();
      this.props.addArticle({ title, id });
      this.setState({ title: "" });
    }
    render() {
      const { title } = this.state;
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;div className="form-group"&gt;
            &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
            &lt;input
              type="text"
              className="form-control"
              id="title"
              value={title}
              onChange={this.handleChange}
            /&gt;
          &lt;/div&gt;
          &lt;button type="submit" className="btn btn-success btn-lg"&gt;
            SAVE
          &lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  const Form = connect(null, mapDispatchToProps)(ConnectedForm);
  export default Form;
  </code></pre>
  
  <p>2) If not, can I achieve that by declaring a new state in store, for example, open: false, and then using the custom reducer to handle that.</p>
  
  <p>3(bonus). If it's not a problem I would appreciate if someone can put me in the right direction which things to start learning first so I can less painfully manage to solve issues related to this amazing framework :) </p>