64 lines
2.3 KiB
Vue
64 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
v-show="show"
|
|
class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
|
|
:class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
|
|
@click.stop
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-base font-medium ml-1">
|
|
<div v-if="!isOnboardingStepsCompleted && !showHelpCenter">
|
|
{{ __('Getting started') }}
|
|
</div>
|
|
<div v-else-if="showHelpCenter">
|
|
{{ __('Help center') }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button @click="minimize = !minimize" variant="ghost">
|
|
<component
|
|
:is="minimize ? MaximizeIcon : MinimizeIcon"
|
|
class="h-3.5"
|
|
/>
|
|
</Button>
|
|
<Button variant="ghost" @click="show = false">
|
|
<FeatherIcon name="x" class="h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="h-full overflow-hidden flex flex-col">
|
|
<OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<div
|
|
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>
|