Update doc components structure

components/doc/DocSectionText.vue

@@ -0,0 +1,47 @@
+<template>
+    <component :is="headerTag" class="doc-section-label">
+        {{ $attrs.label }}
+        <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
+    </component>
+    <div v-if="$attrs" class="doc-section-description">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+    methods: {
+        onClick(event) {
+            const parentElement = event.currentTarget.parentElement;
+            const hash = window.location.hash.substring(1);
+
+            hash === this.$attrs.id && event.preventDefault();
+
+            setTimeout(() => {
+                parentElement.scrollIntoView({ block: 'start' });
+            }, 0);
+        }
+    },
+    computed: {
+        checkRouteName() {
+            const path = this.$router.currentRoute.value.path;
+
+            if (path.lastIndexOf('/') === path.length - 1) {
+                return path.slice(0, -1);
+            }
+
+            return path;
+        },
+        headerTag() {
+            if (this.$attrs.level === 3) {
+                return 'h4';
+            } else if (this.$attrs.level === 2) {
+                return 'h3';
+            }
+
+            return 'h2';
+        }
+    }
+};
+</script>