docs: add navigations section

docs/.vitepress/config.js

@@ -17,6 +17,10 @@ const Guide = [
     text: 'Markdown Syntax',
     link: '/guide/syntax',
   },
+  {
+    text: 'Navigation',
+    link: '/guide/navigation',
+  },
   {
     text: 'Animations',
     link: '/guide/animations',

docs/.vitepress/theme/styles/layout.css

@@ -192,24 +192,19 @@ li > ol {
 }
 
 table {
-  display: block;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  overflow-x: auto;
+  @apply w-full;
 }
 
 tr {
-  border-top: 1px solid var(--c-divider-light);
+  @apply border-b border-gray-400 border-opacity-20;
 }
 
-tr:nth-child(2n) {
-  background-color: var(--code-inline-bg-color);
+th {
+  @apply text-left font-600;
 }
 
-th,
-td {
-  border: 1px solid var(--c-divider-light);
-  padding: 0.6em 1em;
+td, th {
+  @apply p-1 py-2;
 }
 
 blockquote {
@@ -221,6 +216,11 @@ blockquote {
   @apply bg-gray-400 bg-opacity-10;
 }
 
+kbd {
+  @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+  @apply bg-gray-400 bg-opacity-5 py-0.5 px-2 text-sm text-center font-mono;
+}
+
 blockquote > p {
   margin: 0;
 }

docs/guide/navigation.md

@@ -1,5 +1,33 @@
 # Navigation
 
-> TODO:
+## Navigation Bar
+
+Move your mouse to the left bottom corner of Slidev page, the navigation bar will be appeared.
+
+![](/screenshots/navbar.png)
+
+| Shortcuts | Button | Description |
+| --- | --- | --- |
+| <kbd>f</kbd> | <carbon-maximize class="inline-icon-btn"/> <carbon-minimize class="inline-icon-btn"/> | toggle fullscreen |
+| <kbd>right</kbd> / <kbd>space</kbd> | <carbon-arrow-right class="inline-icon-btn"/> | next animation or slide |
+| <kbd>left</kbd> | <carbon-arrow-left class="inline-icon-btn"/> | previous animation or slide |
+| <kbd>up</kbd> | - |  previous slide |
+| <kbd>down</kbd> | - | next slide |
+| <kbd>o</kbd> | <carbon-apps class="inline-icon-btn"/> | toggle [slides overview](#slides-overview) |
+| <kbd>d</kbd> | <carbon-sun class="inline-icon-btn"/> <carbon-moon class="inline-icon-btn"/> | toggle dark mode |
+| - | <carbon-user-avatar class="inline-icon-btn"/> | toggle [camera view](/guide/recording#camera-view) |
+| - | <carbon-video class="inline-icon-btn"/> | [recording](/guide/recording#camera-view) |
+| - | <carbon-user-speaker class="inline-icon-btn"/> | enter [presenter mode](/guide/presenter-mode) |
+| - | <carbon-edit class="inline-icon-btn"/> | toggle [integrated editor](/guide/editors#integrated-editor) |
+| - | <carbon-download class="inline-icon-btn"/> | download slides (only appear in [SPA build](/guide/exporting#single-page-application-spa)) |
+| - | <carbon-information class="inline-icon-btn"/> | show information about the slides |
+| - | <carbon-settings-adjust class="inline-icon-btn"/> | show settings menu |
+| <kbd>g</kbd> | - | show goto... |
+
+<br>
+
+## Slides Overview
+
+By pressing <kbd>o</kbd> or click the <carbon-user-speaker class="inline-icon-btn"/> button in the navigation bar, you can have the overview of your slides can jumpping between them easily. 
 
 ![](/screenshots/slides-overview.png)