Advanced section + Composition API (#131)

* chore: restructured sidebar

* fix: fixed styles

* feat: scaffilded setup guide

* chore: finished setup guide and fixed setup API

* fix: renamed advanced section

* feat: added provide-inject guide

* fix: fixed provide-inject API

* fix: fixed headings

* feat: finished Composition API migration

* feat: added basic refs and reactive

* feat: added readonly

* chore: fixed TODOs

* fix: fixed headings

* fix: fixed CSS typo

Author: NataliaTepluhina

src/.vuepress/config.js

@@ -31,15 +31,6 @@ const sidebar = {
         '/guide/component-edge-cases'
       ]
     },
-    {
-      title: 'Internals',
-      collapsable: false,
-      children: [
-        '/guide/reactivity',
-        '/guide/optimizations',
-        '/guide/change-detection'
-      ]
-    },
     {
       title: 'Reusability & Composition',
       collapsable: false,
@@ -48,18 +39,36 @@ const sidebar = {
         '/guide/custom-directive',
         '/guide/teleport',
         '/guide/render-function',
-        '/guide/plugins',
-        '/guide/composition-api-introduction'
+        '/guide/plugins'
       ]
     },
     {
-      title: 'Tooling',
+      title: 'Advanced Guides',
       collapsable: false,
       children: [
-        '/guide/single-file-component',
-        '/guide/testing'
+        {
+          title: 'Reactivity',
+          children: ['/guide/reactivity', '/guide/reactivity-fundamentals', '/guide/reactivity-computed-watchers']
+        },
+        {
+          title: 'Composition API',
+          children: [
+            '/guide/composition-api-introduction',
+            '/guide/composition-api-setup',
+            '/guide/composition-api-lifecycle-hooks',
+            '/guide/composition-api-provide-inject',
+            '/guide/composition-api-template-refs'
+          ]
+        },
+        '/guide/optimizations',
+        '/guide/change-detection'
       ]
     },
+    {
+      title: 'Tooling',
+      collapsable: false,
+      children: ['/guide/single-file-component', '/guide/testing']
+    },
     {
       title: 'Scaling Up',
       collapsable: false,

src/.vuepress/styles/index.styl

@@ -149,3 +149,10 @@
     vertical-align: middle;
   }
 }
+
+.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
+  font-size: inherit;
+  cursor: pointer!important;
+  font-weight: bold;
+  opacity: 1!important;
+}

src/api/basic-reactivity.md

@@ -12,7 +12,7 @@ const obj = reactive({ count: 0 })
 
 The reactive conversion is "deep"—it affects all nested properties. In the [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) based implementation, the returned proxy is **not** equal to the original object. It is recommended to work exclusively with the reactive proxy and avoid relying on the original object.
 
-### Typing
+**Typing:**
 
 ```ts
 function reactive<T extends object>(target: T): UnwrapNestedRefs<T>