diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 4e3883d..15ca617 100755 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -21,6 +21,7 @@ const { total: favTotal } = storeToRefs(favorites) const history = useHistoryStore() const { total: histTotal } = storeToRefs(history) + const links = computed(() => { const links = [ { @@ -83,7 +84,7 @@ const links = computed(() => { }, { id: 'wizard', - class: 'hidden sm:flex mt-4 border-t-2 border-gray-300 pt-4', + class: 'mt-4 border-t-2 border-gray-300 pt-4', label: t('nav.tour'), icon: 'ph-student', onSelect: () => start( tourConfig ), @@ -104,6 +105,110 @@ const links = computed(() => { return [ homeLink,...links] }) +const { start } = useDriver("onboarding"); + +const steps = [ + { + element: "#bible-studies", + popover: { + title: t('nav.bible_studies'), + description: t('nav.bible_studies_tour_description'), + side: "right", + }, + }, + { + element: "#conferences", + popover: { + title: t('nav.conferences'), + description: t('nav.conferences_tour_description'), + side: "right", + }, + }, + { + element: "#betweenthelines", + popover: { + title: t('nav.between_the_lines'), + description: t('nav.betweenthelines_tour_description'), + side: "right", + }, + }, + { + element: "#favorites", + popover: { + title: t('nav.my_list'), + description: t('nav.favorites_tour_description'), + side: "right", + }, + }, + { + element: "#history", + popover: { + title: t('nav.history'), + description: t('nav.history_tour_description'), + side: "right", + }, + }, + { + element: "#changelog", + popover: { + title: t('nav.changelog'), + description: t('nav.changelog_tour_description'), + side: "right", + }, + }, + { + element: "#settings", + popover: { + title: t('nav.settings'), + description: t('nav.settings_tour_description'), + side: "right", + }, + }, + { + element: "#feedback", + popover: { + title: t('feedback.title'), + description: t('nav.feedback_tour_description'), + side: "right", + }, + }, + { + element: "#localeSelector", + popover: { + title: t('nav.localeselector'), + description: t('nav.localeselector_tour_description'), + side: "right", + }, + }, + { + element: ".collapse-sidebar-icon", + popover: { + title: t('search.collapse'), + description: t('search.collapse_sidebar_tour_description'), + side: "bottom" + } + }, + { + element: ".total-results", + popover: { + title: t('search.total_results'), + description: t('search.total_results_tour_description'), + side: "bottom" + } + } + ] + + const tourConfig = { + nextBtnText: t('tour.next'), + prevBtnText: t('tour.prev'), + doneBtnText: t('tour.done'), + progressText: t('tour.progress'), + showProgress: true, + animate: true, + smoothScroll: true, + steps: steps, + } +