This demo displays a simple example of how to use Material-UI menus in concert with react-router and react-redux.
This demo displays the same concept as mui-drawer except the navigation is a function of menus instead of drawers.
When you read a text book in school the author breaks all of the information into higher levels called chapters and then within those chapters are more fine grained knowledge called sections. This demo simulates that concept by building a framework to enable electronic navigation of information broken down into chapters and sections. You can navigate around using the chapter menu drop down in the upper left hand corner of the screen and then within those chapters individual sections which are the menu items. Play around with the demo to see how it works.
The only thing that is displayed on the screen is your location. But that is enough to show that the navigation is working. It is up to the developer to expand this concept if they so choose by adding in more information to your E-book.
You will see when you get into Github Worlds Menu that the menu items are the views instead of the sections and the chapters are actually the Github repository you wish to view.
Inside this demo is a proof of concept for how to add dynamic routes to your application. In this demo, the core route which is a chapter is the first part of the URL and the section is the second part of the URL. The combination of these two items is what drives the react router to its final destination. Having the ability to dynamically modify the routes by adding in chapters is accomplished via the Admin icon which is between the Section menu and the Github Icon.
The KeyContainer is responsible for handling route changes by
- changing the redux state via the Picker
- and pushing the new route onto the History API
By doing this the new route URL will show up in the address bar.
This project has been deprecated and currently there is not a good well known solution to keep the History API and the Redux state in sync so I have forked the above repo and placed it inside this demo and ghw-menu.
Eventually we will persist the new routes or chapters to localStorage and add in another button to clear out the localStorage and reset the redux state machine.
But for now each application refresh in the browser resets the redux state machine.