I’m working on an interactive guide for my website to improve user experience, allowing users to navigate through different sections based on a guide displayed in the sidebar. Currently, my guide is designed to be specific to the logged-in user and the currently open page.
However, I need to add navigation functionality so that users can directly open a specific page when they reach the corresponding option in the guide. Despite several attempts, I haven’t been able to achieve this.
Here’s what I’ve done so far:
- Created a guide tailored to the logged-in user and their current page.
- Implemented the
onNextClick() function to attempt navigation.
Below is a snippet of my code. For now I am trying to integrate the navigation functionality in candidate section:
const driver = window.driver.js.driver;
const roleBasedSteps = {
admin: {
commonSteps: [
{
element: '#dashboardBtn',
popover: {
title: 'Dashboard',
description: 'Overview your overall progress in figures, charts and tables.',
position: 'auto'
}
},
{
element: '#emailBtn',
popover: {
title: 'Email',
description: 'Email box where you can send, receive and read emails.',
position: 'auto'
}
},
{
element: '#helpBtn',
popover: {
title: 'Help',
description: 'Get stuck? Visit here.',
position: 'auto'
}
},
{
element: '#usersDropdown',
popover: {
title: 'Users List',
description: 'View all users list to manage them.',
position: 'auto'
}
}
],
'index.php': [
{
element: '#adminDashboardCountStats',
popover: {
title: 'Total Counts',
description: 'View all counts of meetings, clients, client interviews and placed clients.',
position: 'auto'
}
}
]
},
employee: {
commonSteps: [
{
element: '#dashboardBtn',
popover: {
title: 'Dashboard',
description: 'Overview your overall progress in figures, charts and tables.',
position: 'auto'
}
},
{
element: '#emailBtn',
popover: {
title: 'Email',
description: 'Email box where you can send, receive and read emails.',
position: 'auto'
}
},
{
element: '#helpBtn',
popover: {
title: 'Help',
description: 'Get stuck? Visit here.',
position: 'auto'
}
},
{
element: '#usersDropdown',
popover: {
title: 'Users List',
description: 'View all users list to manage them.',
position: 'auto'
}
}
],
'index.php': [
{
element: '#employeeDashboardCountStats',
popover: {
title: 'Total Counts',
description: 'View all counts of meetings, clients, client interviews and placed clients.',
position: 'auto'
}
}
]
},
candidate: {
commonSteps: [
{
element: '#dashboardBtn',
popover: {
title: 'Dashboard',
description: 'The dashboard has an overview to how many jobs have been applied to and any interviews you have upcoming.',
position: 'auto'
},
onNextClick: () => {
window.location.href = 'index.php';
}
},
{
element: '#emailBtn',
popover: {
title: 'Email',
description: 'Email box where you can send, receive and read emails.',
position: 'auto'
},
onNextClick: () => {
window.location.href = 'email.php';
}
},
{
element: '#kanbanDropdown',
popover: {
title: 'Interviews Board',
description: 'On the interviews tab you can track the status of your interviews. If you have manual interviews you can also add them here.',
position: 'auto'
}
},
{
element: '#jobsListBtn',
popover: {
title: 'Jobs List',
description: 'On the Jobs List are all the jobs that we have applied for. What is important is to rate 5 to 10 jobs every week so we can get better at applying to jobs and feel free to drop in comments.',
position: 'auto'
}
},
{
element: '#calendarBtn',
popover: {
title: 'Calendar',
description: 'When you get an interview request it will be on your calendar.',
position: 'auto'
}
},
{
element: '#accountDropdown',
popover: {
title: 'Account',
description: 'Manage your profile.',
position: 'auto'
}
},
{
element: '#helpBtn',
popover: {
title: 'Help',
description: 'If you are having any issues please feel free to call support or chat with us.',
position: 'auto'
}
},
{
element: '#collapseBtn',
popover: {
title: 'Collapse Sidebar',
description: 'Collapse sidebar menu.',
position: 'auto'
}
}
],
'index.php': [
{
element: '#dashboardTotalCounts',
popover: {
title: 'Total Counts',
description: 'View all counts of jobs, interviews and meetings.',
position: 'auto'
}
},
{
element: '#dashboardAppliedJobsCount',
popover: {
title: 'Applied Jobs Graph',
description: 'View graphical representation below based on selected date range of applied jobs.',
position: 'auto'
}
},
{
element: '#dashboardInterviewsListTable',
popover: {
title: 'Interviews List Table',
description: 'View tabular view of your interviews.',
position: 'auto'
}
}
],
'email.php': [
{
element: '.composeEmailBtn',
popover: {
title: 'Compose Email',
description: 'Opens compose emails section.',
position: 'auto'
}
},
{
element: '#emailSidebarSection',
popover: {
title: 'Email Folders',
description: 'View emails in each folder.',
position: 'auto'
}
},
{
element: '#load-folder-emails',
popover: {
title: 'Emails List',
description: 'View all emails of specific folder.',
position: 'auto'
}
}
],
'jobs_list.php': [
{
element: '#jobsListPageSearch',
popover: {
title: 'Search Job',
description: 'Search from jobs list.',
position: 'auto'
}
},
{
element: '#jobsListAction',
popover: {
title: 'Give Rating',
description: 'Rate any job by clicking action button against the job.',
position: 'auto'
}
},
{
element: '#jobsListAction',
popover: {
title: 'Give Review',
description: 'Review any job by clicking action button against the job.',
position: 'auto'
}
}
],
'kanban.php': [
{
element: '#kanbanInterviews',
popover: {
title: 'Pending Interviews',
description: 'Here is the list of all upcoming interviews.',
position: 'auto'
}
},
{
element: '#kanbanStage1',
popover: {
title: 'First Stage',
description: 'Here is the list of interviews of first stage.',
position: 'auto'
}
},
{
element: '#kanbanStage2',
popover: {
title: 'Second Stage',
description: 'Here is the list of interviews of second stage.',
position: 'auto'
}
},
{
element: '#kanbanRejected',
popover: {
title: 'Rejected',
description: 'Here is the list of failed interviews.',
position: 'auto'
}
},
{
element: '#kanbanOffer',
popover: {
title: 'Offer',
description: 'Here is the list of passed interviews.',
position: 'auto'
}
},
{
element: '.kanbanAddInterview1',
popover: {
title: 'Add New',
description: 'Opens pop up to add new item.',
position: 'auto'
}
},
{
element: '.kanbanAddInterview2',
popover: {
title: 'Add New',
description: 'Opens pop up to add new item.',
position: 'auto'
}
},
{
element: '.kanbanAddInterview3',
popover: {
title: 'Add New',
description: 'Opens pop up to add new item.',
position: 'auto'
}
},
{
element: '.kanbanAddInterview4',
popover: {
title: 'Add New',
description: 'Opens pop up to add new item.',
position: 'auto'
}
},
{
element: '.kanbanAddInterview5',
popover: {
title: 'Add New',
description: 'Opens pop up to add new item.',
position: 'auto'
}
}
]
}
};
function mergeGuideSteps(common, specific) {
return [...common, ...specific];
}
const steps = mergeGuideSteps(roleBasedSteps[userRole].commonSteps, roleBasedSteps[userRole][currentPage]) || [];
function expandHiddenAreas(steps) {
steps.forEach(step => {
const element = document.querySelector(step.element);
if (element) {
let parent = element.parentElement;
while (parent) {
if (parent.style.display === 'none' || parent.style.visibility === 'hidden') {
parent.style.display = '';
parent.style.visibility = '';
}
if (parent.classList.contains('collapsed')) {
parent.classList.remove('collapsed');
}
parent = parent.parentElement;
}
}
});
}
function isElementInCommonSteps(commonSteps, element) {
const result = commonSteps.some(step => step.element === element);
// console.log(`Checking if element ${element} is in common steps: ${result}`);
return result;
}
function expandSidebarIfNeeded(commonSteps, currentElement) {
const sidebar = document.querySelector('#navbarVerticalCollapse');
const isMobileScreen = window.innerWidth <= 990;
// console.log(window.innerWidth);
const cElement = "#" + currentElement;
if (isMobileScreen && isElementInCommonSteps(commonSteps, cElement)) {
sidebar.classList.add('show');
} else {
sidebar.classList.remove('show');
}
}
const driverObj = driver({
showProgress: true,
steps: steps,
onHighlightStarted: (element) => {
expandSidebarIfNeeded(roleBasedSteps[userRole].commonSteps, element.id);
}
});
document.getElementById('startGuide').addEventListener('click', function () {
expandHiddenAreas(steps);
driverObj.drive();
});
I’ve tried various approaches to link the guide steps to specific pages but haven’t succeeded. Can anyone help me figure out how to correctly implement this navigation functionality?
Any assistance or suggestions would be greatly appreciated!
