The main navigation is positioned on the left side of each Merchant Center screen. It contains links to the different applications within a project.
The Merchant Center is composed of multiple independent applications, where each application defines its own set of links. However, the main navigation must contain links from all the available applications for a project.
The links are rendered dynamically on runtime, where the main navigation pulls the data from a common source.
Additionally, links to Custom Applications are also fetched dynamically, based on the registered applications within a project.
Links for local development
However, when developing a Custom Application locally, we can't fetch any configuration dynamically. This is because only one application is running locally and therefore links to other applications are pretty much useless.
Therefore, in development only the application links should be rendered. To do so, you need to configure the links in the menu.json. The file is then loaded through a special prop that is only available in development mode.
The menu.json is only used for development. For production usage, the configuration of the links needs to be registered in the Merchant Center.
Furthermore, when you visit the URL http://localhost:3001/ in development, you get redirected to the default route /:projectKey, but your application can't handle this route and shows a 404 page. To fix that, you can provide an extra redirect to your main application route path, which is only used in development mode.