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="flex items-center justify-between">
<div class="text-base font-medium ml-1"> <div class="text-base font-medium ml-1">
<div v-if="minimize && !isOnboardingStepsCompleted"> <div v-if="minimize && !isOnboardingStepsCompleted && !showHelpCenter">
{{ __('Getting started') }} {{ __('Getting started') }}
</div> </div>
<div v-else> <div v-else-if="showHelpCenter">
{{ __('Help center') }} {{ __('Help center') }}
</div> </div>
</div> </div>
@ -27,25 +27,37 @@
</div> </div>
</div> </div>
<div class="h-full overflow-hidden flex flex-col"> <div class="h-full overflow-hidden flex flex-col">
<OnboardingSteps v-if="!isOnboardingStepsCompleted" /> <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
</div> </div>
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
<div <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" 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" /> <HelpIcon class="h-4" />
<div class="text-base">{{ __('Help centre') }}</div> <div class="text-base">{{ __('Help centre') }}</div>
</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>
</div> </div>
</template> </template>
<script setup> <script setup>
import StepsIcon from '@/components/Icons/StepsIcon.vue'
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue' import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue' import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
import HelpIcon from '@/components/Icons/HelpIcon.vue' import HelpIcon from '@/components/Icons/HelpIcon.vue'
import OnboardingSteps from '@/components/OnboardingSteps.vue' import OnboardingSteps from '@/components/OnboardingSteps.vue'
import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding' import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
import { ref } from 'vue'
const show = defineModel() const show = defineModel()
const showHelpCenter = ref(false)
</script> </script>