Index: lams_learning/web/css/components-learner.css
===================================================================
diff -u -re79e55dbcff10c82a36fcd5a6d902f23af4676e3 -r0a4686c3282eeb4f688ffb52a17818d8de6bbfd5
--- lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision e79e55dbcff10c82a36fcd5a6d902f23af4676e3)
+++ lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision 0a4686c3282eeb4f688ffb52a17818d8de6bbfd5)
@@ -30,15 +30,19 @@
     font-size: 1.8rem;
 }
 
-.component-page-wrapper #lesson-name {
-    margin-left: 1rem;
-    margin-top: .6rem;
+.component-page-wrapper .component-page-content {
+    min-height: 100vh;
 }
 
-#header {
+.component-page-wrapper .component-page-content #header {
     box-shadow: 0px 1px 0px var(--bs-gray-400);
 }
 
+.component-page-wrapper .component-page-content #lesson-name {
+    margin-left: 1rem;
+    margin-top: .6rem;
+}
+
 .component-page-wrapper .top-menu #progress-bar-widget {
     min-width: 10rem;
     margin-top: .6rem;
@@ -60,7 +64,7 @@
     max-width: 70rem;
     border-radius: 1.2rem;
     border: thin solid var(--bs-gray-400);
-	box-shadow: 0px 3px 6px var(--bs-gray-400);
+    box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
 .component-page-wrapper .component-sidebar.active {
@@ -74,7 +78,7 @@
 }
 
 .component-page-wrapper .component-sidebar .progress-bar-items {
-    background-color: var(--bs-gray-200); 
+    background-color: var(--bs-gray-200);
     padding: .5rem;
     margin-bottom: 0;
     border-radius: 1.2rem;
@@ -91,7 +95,7 @@
 
 .component-page-wrapper .component-sidebar .progress-bar-items > li a {
     text-decoration: none;
-	color: var(--bs-gray-dark);
+    color: var(--bs-gray-dark);
 }
 
 .component-page-wrapper .component-sidebar .progress-bar-items > li > .progress-bar-icon {
@@ -133,12 +137,12 @@
 }
 
 .component-page-wrapper #progress-bar-widget {
-	font-size: 0.90rem;
+    font-size: 0.90rem;
 }
 
 .component-page-wrapper .sidebar-title {
     font-size: 1.2rem;
-	margin-bottom: 0.5rem
+    margin-bottom: 0.5rem
 }
 
 .component-page-wrapper .sidebar-title {
@@ -148,5 +152,4 @@
 
 .component-page-wrapper .sidebar-title-icon {
     font-size: 1rem;
-}
-
+}
\ No newline at end of file
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -r6ea65384311c0e9e85c3783f311f594f79aa63d0 -r0a4686c3282eeb4f688ffb52a17818d8de6bbfd5
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 6ea65384311c0e9e85c3783f311f594f79aa63d0)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 0a4686c3282eeb4f688ffb52a17818d8de6bbfd5)
@@ -1,12 +1,8 @@
 // refresh progress bar on first/next activity load
 function initLearnerPage(toolSessionId, userId) {
-    $('.component-page-wrapper .sidebar-toggle-button').click(function () {
-        let topToggleButton = $('.component-page-wrapper .component-page-content > header .sidebar-toggle-button'),
-            isExpanded = topToggleButton.attr('aria-expanded') == 'true';
-        topToggleButton.attr('aria-expanded', !isExpanded)
-            .children('i').toggleClass(topToggleButton.data('closed-class')).toggleClass(topToggleButton.data('opened-class'));
-        $('.component-page-wrapper .component-sidebar').toggleClass('active').attr('aria-expanded', !isExpanded);
-        $('.component-sidebar').focus();
+    $('.component-page-wrapper .sidebar-toggle-button').click(function (event) {
+        event.stopPropagation();
+        toggleProgressBar();
     });
 
     $.ajax({
@@ -88,4 +84,28 @@
             $('#progress-bar-widget-value').text(progressBarWidgetValue + '%');
         }
     });
+}
+
+function toggleProgressBar(forceClose) {
+    let pageContent = $('.component-page-wrapper .component-page-content'),
+        topToggleButton = $('header .sidebar-toggle-button', pageContent),
+        isExpanded = forceClose || topToggleButton.attr('aria-expanded') == 'true';
+    topToggleButton.attr('aria-expanded', !isExpanded)
+        .children('i').toggleClass(topToggleButton.data('closed-class')).toggleClass(topToggleButton.data('opened-class'));
+    $('.component-page-wrapper .component-sidebar').toggleClass('active').attr('aria-expanded', !isExpanded);
+    $('.component-sidebar').focus();
+
+    pageContent.off('click');
+    $('body').off('keyup');
+
+    if (!isExpanded) {
+        pageContent.one('click', function (){
+            toggleProgressBar(true);
+        });
+        $('body').on('keyup', function (event){
+            if (event.key === "Escape") {
+                toggleProgressBar(true);
+            }
+        });
+    }
 }
\ No newline at end of file