function navpane() {
    // Sample JSON data
    let isHighlighted = false;
    let currentlyHighlightedElement = null; // Track the currently highlighted element
    console.log('navpane called');
    var jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
    // var arr = JSON.parse( localStorage.getItem('memoriesdata') );
    // var jsonData2 = JSON.parse(jsonData);
    console.log(typeof jsonData);
    console.log('jsonData', jsonData);

    // Function to remove <p></p> tags from HTML content
    function removeParagraphTags(html) {
        console.log('html:', html);
        return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
    }

    function createTreeWithHeading(data, container) {
        console.log('data', data.question_paper_title);
        // Extract the treeTitle from the JSON data and remove <p></p> tags
        const treeTitle = removeParagraphTags(data.question_paper_title);

        // Create the heading element
        const heading = document.createElement('a'); // You can use h1, h2, div, or any other suitable HTML element
        heading.style.color = '#740fd6';

        const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
        heading.innerHTML = truncatedTitle; // Set the text content of the heading (with HTML tags removed)
        // heading.style.fontSize = 'x-large'; // Set the font size
        // heading.style.marginLeft = '26px';
        container.appendChild(heading);

        // Create the tree structure
        createTree(data, container);
    }

    // Function to create the collapsible tree
    function createTree(data, container) {
        data.sections.forEach(section => {
            const sectionDiv = document.createElement('div');
            // const sectionId = section.section_id;
            sectionDiv.className = 'section main-heading';
            // sectionDiv.id = sectionId;
            console.log('sectionDiv', sectionDiv)
            container.appendChild(sectionDiv);

            // Create arrow icon element
            const sectionArrow = document.createElement('span');
            sectionArrow.className = 'arrow-right';
            sectionArrow.style.cursor = 'pointer'; // Set cursor to pointer
            sectionDiv.appendChild(sectionArrow);

            // Click event listener for the arrow icon
            sectionArrow.addEventListener('click', () => {
                contentDiv.classList.toggle('visible');
                sectionDiv.classList.toggle('collapsed');
                if (sectionDiv.classList.contains('collapsed')) {
                    sectionArrow.classList.remove('arrow-right');
                    sectionArrow.classList.add('arrow-down');
                } else {
                    sectionArrow.classList.remove('arrow-down');
                    sectionArrow.classList.add('arrow-right');
                }
            });

            const sectionLink = document.createElement('a');
            sectionLink.href = '#' + section.section_id;
            sectionLink.style.color = '#740fd6';

            // Add a click event listener to toggle highlighting and boldness
            sectionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                    // Remove highlight from the previously highlighted element
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }

                if (currentlyHighlightedElement === sectionLink) {
                    // Toggle highlight on the current element
                    sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    // Make the text bold
                    sectionLink.style.fontWeight = 'bold';
                    // Update the currently highlighted element
                    currentlyHighlightedElement = sectionLink;
                }
            });

            if (section.section_title == null || typeof section.section_title === 'undefined') {
                section.section_title = "sampletitle";
            }

            sectionLink.innerHTML = removeParagraphTags(section.section_title);
            sectionDiv.appendChild(sectionLink);

            const contentDiv = document.createElement('div');
            contentDiv.className = 'content';
            section.questions.forEach(question => {
                createTreeNode(question, contentDiv);
            });

            container.appendChild(contentDiv);
        });
    }

    function createTreeNode(nodeData, parentNode) {
        const nodeDiv = document.createElement('div');
        // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
        const nodeDataId = nodeData.textQuestion_Id || nodeData.choice_question_id;
        parentNode.appendChild(nodeDiv);

        if (nodeData.question) {
            // Create a bullet point element
            const bulletPoint = document.createElement('span');
            // Style the bullet point element
            bulletPoint.style.marginRight = '10px'; // Add space to the right of the bullet point
            bulletPoint.style.fontSize = '23px';
            bulletPoint.style.fontWeight = 'bold';
            bulletPoint.style.color = 'darkgray'; // Change the color of the bullet point
            bulletPoint.textContent = '\u2022'; // Unicode character for a bullet point dot
            // Append the bullet point element to the nodeDiv
            nodeDiv.appendChild(bulletPoint);

            const questionLink = document.createElement('a');
            console.log('nodeDiv.id:', nodeDataId);
            questionLink.href = '#' + nodeDataId;
            questionLink.style.color = '#740fd6';

            // Add a click event listener to toggle highlighting and boldness
            questionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    // Remove highlight from the previously highlighted element
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }

                if (currentlyHighlightedElement === questionLink) {
                    // Toggle highlight on the current element
                    questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    // Make the text bold
                    questionLink.style.fontWeight = 'bold';
                    // Update the currently highlighted element
                    currentlyHighlightedElement = questionLink;
                }
            });

            // Check if the question text is longer than 20 characters
            if (nodeData.question.length > 20) {
                questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '.....');
            } else {
                questionLink.innerHTML = removeParagraphTags(nodeData.question);
            }

            nodeDiv.appendChild(questionLink);
        } else if (nodeData.group_title) {
            const groupTitleDiv = document.createElement('div');
            const groupTitleId = nodeData.question_group_id;
            groupTitleDiv.className = 'question-group';
            // groupTitleDiv.id = groupTitleId;
            parentNode.appendChild(groupTitleDiv);

            // Create arrow icon element for group title
            const groupTitleArrow = document.createElement('span');
            groupTitleArrow.className = 'arrow-right';
            groupTitleArrow.style.cursor = 'pointer'; // Set cursor to pointer
            groupTitleDiv.appendChild(groupTitleArrow);

            // Click event listener for the arrow icon
            groupTitleArrow.addEventListener('click', () => {
                groupQuestionsDiv.classList.toggle('visible');
                groupTitleDiv.classList.toggle('collapsed');
                if (groupTitleDiv.classList.contains('collapsed')) {
                    groupTitleArrow.classList.remove('arrow-down');
                    groupTitleArrow.classList.add('arrow-down');
                } else {
                    groupTitleArrow.classList.remove('arrow-down');
                    groupTitleArrow.classList.add('arrow-right');
                }
            });

            const groupQuestionLink = document.createElement('a');
            console.log('groupTitleDiv.id:', groupTitleId);
            groupQuestionLink.href = '#' + groupTitleId;
            groupQuestionLink.style.color = '#740fd6';

            // Add a click event listener to toggle highlighting and boldness
            groupQuestionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                    // Remove highlight from the previously highlighted element
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }

                if (currentlyHighlightedElement === groupQuestionLink) {
                    // Toggle highlight on the current element
                    groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    // Make the text bold
                    groupQuestionLink.style.fontWeight = 'bold';
                    // Update the currently highlighted element
                    currentlyHighlightedElement = groupQuestionLink;
                }
            });

            // Check if the group_title is longer than 20 characters
            if (nodeData.group_title.length > 20) {
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
            } else {
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
            }
            groupTitleDiv.appendChild(groupQuestionLink);

            const groupQuestionsDiv = document.createElement('div');
            groupQuestionsDiv.className = 'content';
            nodeData.questions.forEach(groupQuestion => {
                createTreeNode(groupQuestion, groupQuestionsDiv);
            });
            parentNode.appendChild(groupQuestionsDiv);
        }
    }

    const questionPaperContainer = document.getElementById('questionPaper');
    createTreeWithHeading(jsonData, questionPaperContainer);

		window.addEventListener('DOMContentLoaded', event => {
			// Toggle the side navigation
			const sidebarToggle = document.body.querySelector('#sidebarToggle');
			if (sidebarToggle) {
				sidebarToggle.addEventListener('click', event => {
					event.preventDefault();
					document.body.classList.toggle('sb-sidenav-toggled');
					let qP = document.getElementById('questionPaper');
					qP.classList.toggle('qP-style');
					localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
				});
			}
		});
    }