I'm in the process of developing a vuepress single page application for showcasing and providing downloads of my personal game projects.
When it comes to website navigation, I am aiming to utilize the native sidebar exclusively. This sidebar will have main categories like 'News' or 'Games', each linked to its own .md file. Within the 'Games' section, I would like the ability to collapse and display individual games as separate .md files rather than just headings. Here is a rough outline of what I have so far:
https://i.sstatic.net/vjR0X.png
In order to achieve this layout, I have included the following snippet in my config.js:
sidebar: [
{
title: 'News',
path: '/',
},
{
title: 'Games',
path: '/games.html',
children: [
{
title: 'Game1',
path: '/games/game1.md',
}
]
},
]
As shown above, I created 'games.md' for the 'Games' section and established a directory where I store 'game1.md' for 'Game1' as a sub-category.
However, my current issue is that when I click on 'Game1' at the bottom, it redirects me back to 'News' instead of 'Games':
https://i.sstatic.net/jmD02.png
What I actually want is for clicking on 'Game1' to redirect me to 'Games' instead of 'News' when viewed from within that specific game.
How can I resolve this problem? Is Vuepress suitable for the requirements of my project?