fix: show/hide help center

This commit is contained in:
Shariq Ansari 2025-03-12 19:49:35 +05:30
parent bd6aa943a2
commit 2131b048d9

View File

@ -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>