From 2131b048d9c54d0933e46aaca23d116773760139 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 19:49:35 +0530
Subject: [PATCH] fix: show/hide help center

---
 frontend/src/components/Modals/HelpModal.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index fd5e902d..3fc239f4 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -7,10 +7,10 @@
   >
     <div class="flex items-center justify-between">
       <div class="text-base font-medium ml-1">
-        <div v-if="minimize && !isOnboardingStepsCompleted">
+        <div v-if="minimize && !isOnboardingStepsCompleted && !showHelpCenter">
           {{ __('Getting started') }}
         </div>
-        <div v-else>
+        <div v-else-if="showHelpCenter">
           {{ __('Help center') }}
         </div>
       </div>
@@ -27,25 +27,37 @@
       </div>
     </div>
     <div class="h-full overflow-hidden flex flex-col">
-      <OnboardingSteps v-if="!isOnboardingStepsCompleted" />
+      <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
     </div>
     <div class="flex flex-col gap-1.5">
       <div
-        v-if="!isOnboardingStepsCompleted"
+        v-if="!isOnboardingStepsCompleted && !showHelpCenter"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+        @click="showHelpCenter = !showHelpCenter"
       >
         <HelpIcon class="h-4" />
         <div class="text-base">{{ __('Help centre') }}</div>
       </div>
+      <div
+        v-if="showHelpCenter && !isOnboardingStepsCompleted"
+        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+        @click="showHelpCenter = !showHelpCenter"
+      >
+        <StepsIcon class="h-4" />
+        <div class="text-base">{{ __('Getting started') }}</div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import OnboardingSteps from '@/components/OnboardingSteps.vue'
 import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
+import { ref } from 'vue'
 
 const show = defineModel()
+const showHelpCenter = ref(false)
 </script>