docs: add more docs

docs/.vitepress/config.ts

@@ -78,6 +78,7 @@ function sidebarGuide() {
       items: [
         { text: 'Introduction', link: '/guide/theme-introduction' },
         { text: 'Nav', link: '/guide/theme-nav' },
+        { text: 'Sidebar', link: '/guide/theme-sidebar' },
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Homepage', link: '/guide/theme-homepage' },
         { text: 'Footer', link: '/guide/theme-footer' },

docs/config/app-configs.md

@@ -64,7 +64,7 @@ Set `false` to disable the feature. If the option is `undefined`, then the value
 ```ts
 export default {
   title: 'VitePress',
-  titleTemplate: 'Vite & Vue powered static site generator.'
+  titleTemplate: 'Vite & Vue powered static site generator'
 }
 ```
 

docs/config/theme-configs.md

@@ -47,6 +47,123 @@ export default {
 }
 ```
 
+## nav
+
+- Type: `NavItem`
+
+The configuration for the nav menu item. You may learn more details at [Theme: Nav](../guide/theme-nav#navigation-links).
+
+```js
+export default {
+  themeConfig: {
+    nav: [
+      { text: 'Guide', link: '/guide' },
+      {
+        text: 'Dropdown Menu',
+        items: [
+          { text: 'Item A', link: '/item-1' },
+          { text: 'Item B', link: '/item-2' },
+          { text: 'Item C', link: '/item-3' }
+        ]
+      }
+    ]
+  }
+}
+```
+
+```ts
+type NavItem = NavItemWithLink | NavItemWithChildren
+
+type NavItemWithLink = {
+  text: string
+  link: string
+  activeMatch?: string
+}
+
+interface NavItemWithChildren {
+  text?: string
+  items: NavItemWithLink[]
+}
+```
+
+## sidebar
+
+- Type: `Sidebar`
+
+The configuration for the sidebar menu item. You may learn more details at [Theme: Nav](../guide/theme-sidebar).
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/introduction' },
+          { text: 'Getting Started', link: '/getting-started' },
+          ...
+        ]
+      }
+    ]
+  }
+}
+```
+
+```ts
+type Sidebar = SidebarGroup[] | SidebarMulti
+
+interface SidebarMulti {
+  [path: string]: SidebarGroup[]
+}
+
+interface SidebarGroup {
+  text: string
+  items: SidebarItem[]
+  collapsible?: boolean
+  collapsed?: boolean
+}
+
+interface SidebarItem {
+  text: string
+  link: string
+}
+```
+
+## socialLinks
+
+- Type: `SocialLink`
+
+You may define this option to show your social account links with icons in nav.
+
+```js
+export default {
+  themeConfig: {
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+      { icon: 'twitter', link: '...' },
+      { icon: 'discord', link: '...' }
+    ]
+  }
+}
+```
+
+```ts
+interface SocialLink {
+  icon: SocialLinkIcon
+  link: string
+}
+
+type SocialLinkIcon =
+  | 'discord'
+  | 'facebook'
+  | 'github'
+  | 'instagram'
+  | 'linkedin'
+  | 'slack'
+  | 'twitter'
+  | 'youtube'
+```
+
 ## footer
 
 - Type: `Footer`

docs/guide/theme-introduction.md

@@ -3,6 +3,7 @@
 VitePress comes with its default theme providing many features out of the box. Learn more about each feature on its dedicated page listed below.
 
 - [Nav](./theme-nav)
+- [Sidebar](./theme-sidebar)
 - [Layout](./theme-layout)
 - [Homepage](./theme-homepage)
 - [Footer](./theme-footer)

docs/guide/theme-sidebar.md

@@ -0,0 +1,159 @@
+# Sidebar
+
+The sidebar is the main navigation block for your documentation. You can configure the sidebar menu in `themeConfig.sidebar`.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/introduction' },
+          { text: 'Getting Started', link: '/getting-started' },
+          ...
+        ]
+      }
+    ]
+  }
+}
+```
+
+## The Basics
+
+The simplest form of the sidebar menu is passing in a single array of links.  The first level item defines the "section" for the sidebar. It should contain `text`, which is the title of the section, and `items` which are the actual navigation links.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Section Title A',
+        items: [
+          { text: 'Item A', link: '/item-a' },
+          { text: 'Item B', link: '/item-b' },
+          ...
+        ]
+      },
+      {
+        text: 'Section Title B',
+        items: [
+          { text: 'Item C', link: '/item-c' },
+          { text: 'Item D', link: '/item-d' },
+          ...
+        ]
+      }
+    ]
+  }
+}
+```
+
+Each `link` should specify the path to the actual file starting with `/`. If you add trailing slash to the end of link, it will show `index.md` of the corresponding directory.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introduction', link: '/guide/' }
+        ]
+      }
+    ]
+  }
+}
+```
+
+## Multiple Sidebars
+
+You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and `Config` page.
+
+To do so, first organize your pages into directories for each desired section:
+
+```
+.
+├─ guide/
+│  ├─ index.md
+│  ├─ one.md
+│  └─ two.md
+└─ config/
+   ├─ index.md
+   ├─ three.md
+   └─ four.md
+```
+
+Then, update your configuration to define your sidebar for each section. This time, you should pass an object instead of an array.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: {
+      // This sidebar gets displayed when user is
+      // under `guide` directory.
+      '/guide/': {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Index', link: '/guide/' },  // /guide/index.md
+          { text: 'One', link: '/guide/one' }, // /guide/one.md
+          { text: 'Two', link: '/guide/two' }  // /guide/two.md
+        ]
+      },
+
+      // This sidebar gets displayed when user is
+      // under `config` directory.
+      '/config/': {
+        text: 'Config',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Index', link: '/config/' },      // /config/index.mdasdfasdfasdfasdfaf
+          { text: 'Three', link: '/config/three' }, // /config/three.md
+          { text: 'Four', link: '/config/four' }    // /config/four.md
+        ]
+      }
+    }
+  }
+}
+```
+
+## Collapsible Sidebar Groups
+
+By adding `collapsible` option to the sidebar group, it shows a toggle button to hide/show each section.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Section Title A',
+        collapsible: true,
+        items: [...]
+      },
+      {
+        text: 'Section Title B',
+        collapsible: true,
+        items: [...]
+      }
+    ]
+  }
+}
+```
+
+All sections are "open" by default. If you would like them to be "closed" on intial page load, set `collapsed` option to `true`.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Section Title A',
+        collapsible: true,
+        collapsed: true,
+        items: [...]
+      }
+    ]
+  }
+}
+```