optimized toc active style and fixed typos

Author: bennobuilder

docs/packages/core/features/state/Methods.md

@@ -357,7 +357,7 @@ Returns the [State](./Introduction.md) it was called on.
 
 ## `watch()`
 
-A `callback` that observes the State on changes.
+Creates a `callback` that observes the State on changes.
 The provided `callback` function will be fired on every State `value` mutation.
 For instance if we update the State value from 'jeff' to 'hans'.
 ```ts {1-4}

docs/packages/react/features/AgileHOC.md renamed to docs/packages/react/features/AgileHoc.md

@@ -36,7 +36,7 @@ console.log(myState); // Returns 'jeff'
 ```ts
 const [myCoolState1, myCoolState2] = useAgile([MY_COOL_STATE1, MY_COOL_STATE2]);
 ```
-Now it returns an array of State `values` that can be destructured.
+In which case it returns an array of State `values` that can be destructured.
 ```ts {6}
 const MY_STATE = App.createState('jeff');
 const MY_STATE_2 = App.createState('frank');
@@ -47,9 +47,9 @@ const [myState, myState2] = useAgile([MY_STATE, MY_STATE_2]);
 console.log(myState); // Returns 'jeff'
 console.log(myState2); // Returns 'frank'
 ```
-Binding multiple States to a Component in a single `useAgile()` Hook has one advantage.
-In some cases, it can lower the rerender count of the React Component.
-This is due to the fact that simultaneously triggered rerender of different States can be combined into one single rerender
+Binding multiple States to a Component using a single `useAgile()` Hook has one advantage.
+In some cases, it can reduce the rerender count of the React Component triggered by AgileTs.
+This is due to the fact that simultaneously triggered rerenders of different States are combined into one single rerender
 if the States share the same `SubscriptionContainer`.
 Each `useAgile()` Hook creates its own `SubscriptionContainer`,
 which serves as an interface to the Component in order to trigger rerender on it.
@@ -81,8 +81,8 @@ Instances that can be bound to a React Component via the `useAgile()` Hook:
   console.log(myComputed); // Returns 'hello there'
   ```  
 - ### [`Collection`](../../core/features/collection/Introduction.md)
-  **Note:** The Collection has no own `observer`.
-  But `useAgile()` is smart enough, to identify a Collection under the hood
+  **Note:** The Collection has no own `Observer`.
+  But `useAgile()` is smart enough, to identify a Collection
   and binds the [`defualt` Group](../../core/features/collection/group/Introduction.md#-default-group) to the Component instead.
   The `default` Group represents the default pattern of the Collection.
   ```ts {7}
@@ -184,16 +184,24 @@ type SubscribableAgileInstancesType = State | Collection | Observer | undefined;
 ### 📄 Return
 
 `useAgile()` returns the current `output` of the passed [Agile Sub Instance](../../../main/Introduction.md#agile-sub-instance).
-```ts {6,9}
-const MY_STATE = App.State(1);
-const MY_STATE_2 = App.State(2);
-const MY_STATE_3 = App.State(3);
+```ts {5}
+const MY_STATE = App.createState('jeff');
+  
+// myComponent.jsx
 
-// One passed Agile Sub Instance
-useAgile(MY_STATE); // Returns 3
+const myState = useAgile(MY_STATE);
+console.log(myState); // Returns 'jeff'
+```
+When passing multiple Agile Sub Instances, an array of `outputs` matching the passed Instances is returned.
+```ts {6}
+const MY_STATE = App.createState('jeff');
+const MY_STATE_2 = App.createState('frank');
+
+// myComponent.jsx
 
-// Multiple passed Agile Sub Instances
-useAgile([MY_STATE, MY_STATE_2, MY_STATE_3]); // Returns [1, 2, 3]
+const [myState, myState2] = useAgile([MY_STATE, MY_STATE_2]);
+console.log(myState); // Returns 'jeff'
+console.log(myState2); // Returns 'frank'
 ```
 
 
@@ -207,17 +215,17 @@ useAgile([MY_STATE, MY_STATE_2, MY_STATE_3]); // Returns [1, 2, 3]
 
 
 ## `useWatcher()`
-A `callback` that observes the State on changes.
+Creates a  `callback` that observes the State on changes.
 The provided `callback` function will be fired on every State `value` mutation.
 For instance if we update the State value from 'jeff' to 'hans'.
 ```ts
-useWatcher(MY_STATE, (value, key) => {
+useWatcher(MY_STATE, (value) => {
   console.log(value); // Returns current State Value
-  console.log(key); // Key of Watcher ("Aj2pB")
 });
 ```
 It is a synonym to the [`watch()`](../../core/features/state/Methods.md#watch) method.
-But it has some advantages. It automatically cleans up the created watcher callback when the React Component unmounts
+However, it has some advantages. 
+For example, it automatically cleans up the created watcher callback when the React Component unmounts
 and might be cleaner to read in 'UI-Component-Code'.
 
 ### 🔴 Example

docs/packages/react/features/Hooks.md

@@ -284,27 +284,6 @@ body {
   }
 }
 
-// ==============================================================================
-// Table of Contents
-// ==============================================================================
-
-.table-of-contents {
-  .table-of-contents__link--active {
-    font-weight: 500;
-    margin-left: -16px;
-    padding: 6px 8px 6px 12px;
-    border-top-right-radius: var(--ifm-code-border-radius);
-    border-bottom-right-radius: var(--ifm-code-border-radius);
-    color: var(--ifm-font-color-base);
-    border-left: 4px solid var(--ifm-color-primary);
-    background-color: rgba(121, 118, 171, 0.2);
-
-    code {
-      color: var(--ifm-font-color-base);
-    }
-  }
-}
-
 // ==============================================================================
 // Toastify
 // ==============================================================================

src/css/custom.scss

@@ -94,3 +94,30 @@
     max-width: var(--ifm-container-width);
   }
 }
+
+:global(.table-of-contents) {
+  border-left-width: 3px;
+}
+
+:global(.table-of-contents li) {
+  position: relative;
+}
+
+:global(.table-of-contents__link--active::before) {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -19px;
+  width: 3px;
+  content: " ";
+  background: var(--ifm-color-primary-lightest);
+}
+
+:global(.table-of-contents__link--active) {
+  color: var(--ifm-color-primary-lightest);
+  font-weight: bold;
+}
+
+ul ul :global(.table-of-contents__link--active::before) {
+  left: -35px;
+}