From 2685655b51d8f6ba0561d1d5d0cc5ce1c27979c4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 27 Mar 2023 18:03:02 +0300
Subject: [PATCH] Use v-show for API

---
 layouts/doc/DocComponent.vue | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/layouts/doc/DocComponent.vue b/layouts/doc/DocComponent.vue
index 4ea105424..5497a5592 100644
--- a/layouts/doc/DocComponent.vue
+++ b/layouts/doc/DocComponent.vue
@@ -7,7 +7,7 @@
 
         <ul class="doc-tabmenu">
             <li :class="{ 'doc-tabmenu-active': tab === 0 }">
-                <button type="button" @click="tab = 0">COMPONENT</button>
+                <button type="button" @click="tab = 0">FEATURES</button>
             </li>
             <li :class="{ 'doc-tabmenu-active': tab === 1 }">
                 <button type="button" @click="tab = 1">API</button>
@@ -15,24 +15,20 @@
         </ul>
 
         <div class="doc-tabpanels">
-            <template v-if="tab === 0">
-                <div class="doc-tabpanel">
-                    <div class="doc-main">
-                        <div class="doc-intro">
-                            <h1>{{ header }}</h1>
-                            <p>{{ description }}</p>
-                        </div>
-                        <DocSections :docs="componentDocs" />
+            <div v-show="tab === 0" class="doc-tabpanel">
+                <div class="doc-main">
+                    <div class="doc-intro">
+                        <h1>{{ header }}</h1>
+                        <p>{{ description }}</p>
                     </div>
-                    <DocSectionNav :docs="componentDocs" />
+                    <DocSections :docs="componentDocs" />
                 </div>
-            </template>
+                <DocSectionNav :docs="componentDocs" />
+            </div>
 
-            <template v-else-if="tab === 1">
-                <div class="doc-tabpanel">
-                    <DocApiSection :doc="apiDocs" :header="header" />
-                </div>
-            </template>
+            <div v-show="tab === 1" class="doc-tabpanel">
+                <DocApiSection :doc="apiDocs" :header="header" />
+            </div>
         </div>
     </div>
 </template>