From 750a498a4dc3800889b5d861c870a67b2cf96bb9 Mon Sep 17 00:00:00 2001
From: Christian Beeznest <christian.fasanando@beeznest.com>
Date: Tue, 10 Feb 2026 23:15:59 -0500
Subject: [PATCH] Learnpath: Improve top navigation layout when toggling TOC -
 refs #7469

---
 public/main/lp/learnpath.class.php            |   2 +-
 public/main/lp/scorm_api.php                  |  34 ++-
 .../views/LearnPath/menubar.html.twig         |   6 +-
 .../Resources/views/LearnPath/view.html.twig  | 231 +++++++++++++-----
 4 files changed, 190 insertions(+), 83 deletions(-)

diff --git a/public/main/lp/learnpath.class.php b/public/main/lp/learnpath.class.php
index c741fa50303..93eafcfb122 100644
--- a/public/main/lp/learnpath.class.php
+++ b/public/main/lp/learnpath.class.php
@@ -1358,7 +1358,7 @@ public function get_navigation_bar($barId = '')
         $reportingIcon = '
             <a class="icon-toolbar"
                 id="stats_link"
-                href="lp_controller.php?action=stats&'.api_get_cidreq(true).'&lp_id='.$lpId.'"
+                href="lp_controller.php?action=stats&origin=learnpath&'.api_get_cidreq(true).'&lp_id='.$lpId.'"
                 onclick="window.parent.API.save_asset(); return true;"
                 target="content_name" title="'.$reportingText.'">
                 '.$icon.'<span class="sr-only">'.$reportingText.'</span>
diff --git a/public/main/lp/scorm_api.php b/public/main/lp/scorm_api.php
index 600a0a18f01..464028b5240 100644
--- a/public/main/lp/scorm_api.php
+++ b/public/main/lp/scorm_api.php
@@ -217,7 +217,7 @@ function APIobject() {
 olms.lms_auto_forward_video = <?php echo (int) $oLP->auto_forward_video; ?>;
 
 var courseUrl = '?cid='+olms.lms_course_id+'&sid='+olms.lms_session_id+'&lp_id='+olms.lms_lp_id;
-var statsUrl = 'lp_controller.php' + courseUrl + '&action=stats';
+var statsUrl = 'lp_controller.php' + courseUrl + '&action=stats&origin=learnpath';
 
 /**
  * Add the "addListeners" function to the "onload" event of the window and
@@ -249,6 +249,16 @@ function getContentFrame() {
         return $f;
     }
 
+    function setContentFrameSrc(src) {
+        var $frame = getContentFrame();
+        if (!$frame.length) {
+        logit_lms("[LP] Content iframe not found (#content_id / #content_id_blank).", 0);
+            return false;
+        }
+        $frame.attr("src", src);
+        return true;
+    }
+
     $(function() {
         var $frame = getContentFrame();
 
@@ -1723,18 +1733,18 @@ function switch_item(current_item, next_item) {
     var mysrc = buildLpContentSrc(targetItemId);
 
     <?php if ('fullscreen' === $oLP->mode) { ?>
-    var w = window.open("" + mysrc, "content_id", "toolbar=0,location=0,status=0,scrollbars=1,resizable=1");
-    if (w) {
-        w.onload = function () {
-        olms.info_lms_item[0] = currentItemId;
-    };
-    w.onunload = function () {
-        olms.info_lms_item[0] = currentItemId;
-    };
-    }
+        var w = window.open("" + mysrc, "content_id", "toolbar=0,location=0,status=0,scrollbars=1,resizable=1");
+        if (w) {
+            w.onload = function () {
+                olms.info_lms_item[0] = currentItemId;
+            };
+            w.onunload = function () {
+                olms.info_lms_item[0] = currentItemId;
+            };
+        }
     <?php } else { ?>
-    log_in_log("Loading " + mysrc + " in iframe", 2);
-    $("#content_id").attr("src", mysrc);
+        log_in_log("Loading " + mysrc + " in iframe", 2);
+        setContentFrameSrc(mysrc);
     <?php } ?>
 
     // (6) Update nav buttons visibility
diff --git a/src/CoreBundle/Resources/views/LearnPath/menubar.html.twig b/src/CoreBundle/Resources/views/LearnPath/menubar.html.twig
index cd04b554a99..93843597596 100644
--- a/src/CoreBundle/Resources/views/LearnPath/menubar.html.twig
+++ b/src/CoreBundle/Resources/views/LearnPath/menubar.html.twig
@@ -2,8 +2,8 @@
     {% set toc_hidden = (toc_hidden|default(0) + 0) %}
     {% set show_left_column = (show_left_column|default(1) + 0) %}
     {% set show_toolbar_by_default = (show_toolbar_by_default|default(0) + 0) %}
-    {# Force the toolbar open when TOC is hidden so navigation is always visible #}
-    {% set force_open = (show_toolbar_by_default == 1) or (toc_hidden == 1 and menu_location != 'top') %}
+    {# Do not force-open the toolbar; user controls it via hamburger #}
+    {% set force_open = (show_toolbar_by_default == 1) %}
     {% if navigation_in_the_middle %}
         <style>
             .c-menu-left { top: 50% !important; }
@@ -42,7 +42,7 @@
             >
                 <i class="mdi-home mdi" aria-hidden="true"></i>
             </a>
-            <span data-lp-menu="nav">
+            <span data-lp-menu="nav" class="lp-menu-nav">
                 {{ navigation_bar }}
             </span>
         </div>
diff --git a/src/CoreBundle/Resources/views/LearnPath/view.html.twig b/src/CoreBundle/Resources/views/LearnPath/view.html.twig
index ac36e97ea74..315541f5919 100644
--- a/src/CoreBundle/Resources/views/LearnPath/view.html.twig
+++ b/src/CoreBundle/Resources/views/LearnPath/view.html.twig
@@ -101,72 +101,155 @@
                 width: 100% !important;
                 margin-left: 0 !important;
             }
-            /* -----------------------------
-             * Floating menu positioning
-             * ----------------------------- */
+
+            /* ============================================================
+             * Floating menu (stable anchor + responsive layout)
+             *
+             * Requirements:
+             * - Hamburger must NEVER move when opening/closing the panel.
+             * - TOC expanded (normal): panel is horizontal, aligned with hamburger.
+             * - TOC collapsed by expand-toggle (.lp-view-collapsed): panel is vertical under hamburger.
+             * - TOC hidden by setting (.lp-toc-hidden): menu goes top-right + panel vertical under hamburger.
+             * ============================================================ */
+
+            /* Reset inherited legacy styling */
+            #btn-menu-float,
+            #btn-menu-float > div,
+            #btn-menu-float > ul {
+                background: transparent !important;
+                border: 0 !important;
+                box-shadow: none !important;
+            }
+
+            /* Base anchor: top-left */
             #btn-menu-float {
                 position: fixed !important;
-                top: 8px !important;
-                left: 8px !important;
+                top: 12px !important;
+                left: 12px !important;
                 right: auto !important;
-                width: auto !important;
-                height: auto !important;
+                width: 40px !important;
+                height: 40px !important;
                 padding: 0 !important;
-                background: transparent !important;
-                box-shadow: none !important;
+                margin: 0 !important;
                 z-index: 999999 !important;
             }
-            #btn-menu-float,
-            #btn-menu-float > div,
-            #btn-menu-float > ul {
-                background: transparent !important;
-                box-shadow: none !important;
+
+            /* Top-right mode (only when .lp-toc-hidden is active) */
+            #btn-menu-float.lp-menu-top-right {
+                left: auto !important;
+                right: 12px !important;
             }
-            #btn-menu-float .circle,
-            #btn-menu-float .circle.open {
-                width: auto !important;
-                height: auto !important;
-                padding: 4px 6px !important;
+
+            /* Hamburger button: absolute so it never shifts */
+            #btn-menu-float .menu-button {
+                position: absolute !important;
+                top: 0 !important;
+                left: 0 !important;
+
+                width: 40px !important;
+                height: 40px !important;
+                display: inline-flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+
+                border-radius: 10px !important;
+                border: 1px solid rgba(0,0,0,0.10) !important;
+                background: rgba(255,255,255,0.94) !important;
+                box-shadow: 0 1px 6px rgba(0,0,0,0.14) !important;
+                padding: 0 !important;
+                margin: 0 !important;
+            }
+
+            #btn-menu-float.lp-menu-top-right .menu-button {
+                left: auto !important;
+                right: 0 !important;
+            }
+
+            #btn-menu-float .menu-button.menu-button-selected {
+                background: rgba(255,255,255,0.98) !important;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.16) !important;
+            }
+
+            /* Panel container */
+            #btn-menu-float .circle {
+                position: absolute !important;
+                top: 0 !important;
+                left: 48px !important;
+                right: auto !important;
+                display: none !important;
+                flex-direction: row !important;
+                align-items: center !important;
+                gap: 8px !important;
+                padding: 0px !important;
                 border-radius: 12px !important;
-                background: rgba(255,255,255,0.92) !important;
-                box-shadow: none !important;
+                border: 1px solid rgba(0,0,0,0.10) !important;
+                background: rgba(255,255,255,0.94) !important;
+                box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
+                white-space: nowrap !important;
             }
-            #btn-menu-float .circle:not(.open) {
-                background: transparent !important;
-                box-shadow: none !important;
+            #btn-menu-float .circle.open {
+                display: inline-flex !important;
             }
-            /* -----------------------------------------------------------------
-             * TOC hidden mode: move menu to TOP-RIGHT and use compact behavior.
-             * This class is toggled by JS only when tocHidden === 1.
-             * ----------------------------------------------------------------- */
-            #btn-menu-float.c-menu-top {
-                position: fixed !important;
-                top: 8px !important;
-                right: 8px !important;
+
+            /* Vertical panel: under the hamburger, aligned to it */
+            #btn-menu-float.lp-menu-vertical .circle {
+                top: 48px !important;
+                left: 0 !important;
+                right: auto !important;
+                flex-direction: column !important;
+                align-items: flex-start !important;
+                gap: 8px !important;
+                padding: 6px 0 !important;
+                white-space: normal !important;
+            }
+
+            /* Vertical + top-right: under the hamburger, right aligned */
+            #btn-menu-float.lp-menu-top-right.lp-menu-vertical .circle {
                 left: auto !important;
-                width: auto !important;
-                z-index: 999999 !important;
+                right: 0 !important;
+                align-items: flex-end !important;
             }
-            #btn-menu-float.c-menu-top .circle {
+
+            /* Toolbar items */
+            #btn-menu-float .circle .icon-toolbar,
+            #btn-menu-float .circle a.icon-toolbar,
+            #btn-menu-float .circle button.icon-toolbar,
+            #btn-menu-float .circle .lp-menu-nav a,
+            #btn-menu-float .circle .lp-menu-nav button {
+                width: 40px !important;
+                height: 40px !important;
                 display: inline-flex !important;
                 align-items: center !important;
-                gap: 6px !important;
-                width: auto !important;
-                padding: 0 !important;
-                background: transparent !important;
+                justify-content: center !important;
+                border-radius: 10px !important;
+                border: 1px solid rgba(0,0,0,0.08) !important;
+                background: rgba(255,255,255,0.98) !important;
                 box-shadow: none !important;
+                padding: 0 !important;
+                margin: 0 !important;
             }
-            #btn-menu-float.c-menu-top .icon-toolbar,
-            #btn-menu-float.c-menu-top .menu-button {
-                background: rgba(255,255,255,0.92) !important;
-                border-radius: 10px !important;
+            #btn-menu-float .circle .icon-toolbar:hover,
+            #btn-menu-float .circle .lp-menu-nav a:hover,
+            #btn-menu-float .circle .lp-menu-nav button:hover {
+                background: #fff !important;
             }
-            #btn-menu-float.c-menu-top .circle:not(.open) {
-                display: none !important;
+
+            /* Navigation bar wrapper - force layout (avoid "square" grouping) */
+            #btn-menu-float .circle .lp-menu-nav {
+                display: flex !important;
+                flex-direction: row !important;      /* horizontal by default */
+                align-items: center !important;
+                gap: 8px !important;
             }
-            #btn-menu-float.c-menu-top .menu-button {
-                z-index: 1000000 !important;
+            #btn-menu-float.lp-menu-vertical .circle .lp-menu-nav {
+                flex-direction: column !important;   /* vertical when TOC is collapsed/hidden */
+                align-items: flex-start !important;
+                gap: 8px !important;
             }
+            #btn-menu-float.lp-menu-top-right.lp-menu-vertical .circle .lp-menu-nav {
+                align-items: flex-end !important;
+            }
+
             /* -----------------------------
              * Loader overlay
              * ----------------------------- */
@@ -399,7 +482,7 @@
         <script>
           $(function () {
             var $main = $("#learning_path_main");
-            var tocHidden = $main.hasClass("lp-toc-hidden") ? 1 : 0;
+            var tocHiddenSetting = $main.hasClass("lp-toc-hidden") ? 1 : 0;
 
             var $menu = $("#btn-menu-float");
             if (!$menu.length) {
@@ -407,13 +490,6 @@
               return;
             }
 
-            /*
-             * Menu positioning rule:
-             * - TOC visible  -> keep menu on the LEFT (default CSS)
-             * - TOC hidden   -> move menu to TOP-RIGHT to avoid covering the title
-             */
-            $menu.toggleClass("c-menu-top", tocHidden === 1);
-
             // Prefer data attributes, fallback to legacy classes.
             var $circle = $menu.find("[data-lp-menu='circle']").first();
             if (!$circle.length) {
@@ -425,15 +501,34 @@
               $toggle = $menu.find(".menu-button").first();
             }
 
-            // Ensure toolbar is visible when TOC is hidden
-            if ($circle.length && $toggle.length) {
-              if (tocHidden === 1) {
+            function updateMenuLayout() {
+              // Layout rules:
+              // - Real TOC hidden setting -> top-right + vertical panel
+              // - Collapsed TOC (lp-view-collapsed) -> left + vertical panel
+              // - Normal mode -> left + horizontal panel
+              var isTocHidden = $main.hasClass("lp-toc-hidden");
+              var isCollapsed = $main.hasClass("lp-view-collapsed");
+              $menu.toggleClass("lp-menu-top-right", isTocHidden);
+              $menu.toggleClass("lp-menu-vertical", isTocHidden || isCollapsed);
+            }
+
+            updateMenuLayout();
+            // Observe class changes to keep menu layout consistent (covers expand/collapse toggles).
+            try {
+              var mo = new MutationObserver(function () {
+                updateMenuLayout();
+              });
+              mo.observe($main.get(0), { attributes: true, attributeFilter: ["class"] });
+            } catch (e) {
+              console.warn("LP: MutationObserver not available, menu layout will update only on known actions.");
+            }
+
+            // Auto-open only once when TOC is hidden by setting (do not fight the user after that).
+            if (tocHiddenSetting === 1 && $circle.length && $toggle.length) {
+              if (!$menu.data("lpAutoOpened")) {
                 $circle.addClass("open");
                 $toggle.addClass("menu-button-selected");
-              } else {
-                // Keep it collapsed on normal (TOC visible) mode.
-                $circle.removeClass("open");
-                $toggle.removeClass("menu-button-selected");
+                $menu.data("lpAutoOpened", true);
               }
             }
 
@@ -452,7 +547,7 @@
               console.warn("LP: menu toggle/circle not found. Toggle binding skipped.");
             }
 
-            // Expand/collapse only when TOC is visible
+            // Expand/collapse only when TOC is visible (setting != 1)
               {% if toc_hidden != 1 %}
               {% if lp_mode == 'embedframe' %}
             $("#lp-view-expand-toggle").off("click.lpExpand").on("click.lpExpand", function (e) {
@@ -460,6 +555,7 @@
               $main.toggleClass("lp-view-collapsed");
               $("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-expand-horizontal");
               $("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-collapse-horizontal");
+              updateMenuLayout();
             });
               {% else %}
             $("#lp-view-expand-toggle").off("click.lpExpand").on("click.lpExpand", function (e) {
@@ -467,6 +563,7 @@
               $main.toggleClass("lp-view-collapsed");
               $("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-collapse-horizontal");
               $("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-expand-horizontal");
+              updateMenuLayout();
             });
               {% endif %}
               {% endif %}
@@ -849,7 +946,7 @@
             }
 
             function patchNavArrowsWhenTocHidden() {
-              if (tocHidden !== 1) return;
+              if (tocHiddenSetting !== 1) return;
 
               // Prefer known IDs if present (most reliable)
               var $prevEl = $("#scorm-previous");
@@ -897,7 +994,7 @@
             }
 
             // When TOC is hidden, keep LP content navigation inside the iframe named "content_name".
-            if (tocHidden === 1) {
+            if (tocHiddenSetting === 1) {
               $menu.find("a").each(function () {
                 var url = resolveUrl(this);
                 if (!url) return;
@@ -945,7 +1042,7 @@
               {% endif %}
 
             function patchNavArrowsWhenTocHiddenSafe() {
-              if (tocHidden !== 1) return;
+              if (tocHiddenSetting !== 1) return;
 
               try {
                 patchNavArrowsWhenTocHidden();
@@ -958,7 +1055,7 @@
             bindPrimaryNavButtons();
             setTimeout(bindPrimaryNavButtons, 200);
             setTimeout(bindPrimaryNavButtons, 600);
-            if (tocHidden === 1) {
+            if (tocHiddenSetting === 1) {
               // Run immediately + retries (menu markup sometimes arrives late)
               patchNavArrowsWhenTocHiddenSafe();
               setTimeout(patchNavArrowsWhenTocHiddenSafe, 200);