Getting Started
This template already provides your pages with a side bar navigation (on the left) for your pages, and a content navigation (on the right) for your sections.
Page navigation
The page navigation, through the side bar on the left, needs to be manually updated. Open the config.ts file and you will find the following structure:
export const sidebar = [
{
text: 'Introduction',
link: '', // No leading slash needed, so this links to the homepage
children: [
{ text: 'Getting Started', link: 'getting-started' },
{ text: 'Example', link: 'example' },
],
},
];
You can change this file to match the pages you want to display, the items within children can also have children elements, but only the first level and second levels will be displayed.
The page navigation is generated in the src/components/SiteSidebar.astro, so if you want to change the depth of elements displayed, styles, etc, that’s the place to go.
Section navigation
The section navigation, through the side bar on the right, is automatically generated by the src/components/DocSidebar.tsx file, it uses the meta-data from markdown files to generate the structure you see.
By default only elements from depth 2 to 5 will be displayed, and at the moment doesn’t work for .astro files.
Other Components
Footer
You can edit your footer here src/components/ArticleFooter.astro, at the moment it is composed of a list of avatars. You can generate your own avatar here and replace the ones from AvatarList.astro.
Theme
The src/components/ThemeToggle.tsx is only responsible for applying the theme, to change the theme colors see public/theme.css
Documentation
For more information on how to use Astro components, check the documentation pages: