Sidebar (and routing) as part of app shell

[mediremi]

A common design pattern in our apps is using a grid layout with a sidebar containing navigation menu items on the left and the app content on the right. This pattern is often paired with react-router-dom and its HashRouter component to provide SPA routing.

Issues with current way of doing things

• Lack of consistency (both code and UI)
  • UI
    • Inconsistent sidebar and app content backgrounds
    • Inconsistent gutters
    • Inconsistent app content padding
    • Making menu items keyboard accessible would mean updating the version of @dhis2/ui for every app
  • Code
    • Different ways to organise + config vs code approach
• External app developers may not be aware of this design pattern, so may use their own components
• Forced to use HashRouter as backend does not know each app's routes

Proposed solution

d2.config.js could be used by developers to declare the routes used by their app like so:

const config = {
    // ...
    pages: {
        '/': 'src/pages/App.js',
        '/some_page/:id': 'src/pages/SomePage.js',
        // Route that should not be visible in sidebar
        '/some_other_page': { component: 'src/pages/SomePage.js', sidebar: false }
    }
}
module.exports = config

and this config would then be used by the app shell to construct a sidebar and router. The runtime would reexport the Link and history exports from the routing package for consumption by the app. Declaring the routes in this way also allows the backend to build a global routing table and hence we would not need to use hash routers.

If config.pages is not present then the app shell would not create a sidebar and allow the app developer to manage routing.

[amcgee]

Nice, great to get these thoughts down! I copied to the older (though quite bare) #151 so locking this one