RHS (video pane) collapse/expand feature

public/css/style.css

@@ -62,3 +62,19 @@
 main {
   padding:0 1rem;
 }
+
+/* ability to toggle the video pane (rhs) */
+.stag_rhs_toggle, .stag_rhs_toggle:hover {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    padding: 0.25rem 0.75rem;
+    border-bottom-left-radius: 6px;
+    background-color: var(--primary-color);
+    color: #fff;
+    z-index: 2;
+}
+body.stag_rhs_collapsed .v-split,
+body.stag_rhs_collapsed .app-right-panel {
+    display: none !important;
+}

public/js/mc.js

@@ -3,4 +3,20 @@ window.top.addEventListener('popstate', function(event) {
 });
 $(document).ready(function() {
     window.top.history.replaceState(window.location.pathname, null, '/mc' + window.location.pathname);
+    $(document).on('click', '.stag_rhs_toggle', function() {
+        var state = window.top.toggleRHS(), icon = $(this).find('i');
+        if(state === 'collapsed') {
+            icon.removeClass().addClass('fa fa-arrow-left');
+        }
+        else {
+            icon.removeClass().addClass('fa fa-arrow-right');
+        }
+    });
 });
+function openInRHS(_url) {
+    window.top.showRHS();
+    var icon = $('.stag_rhs_toggle i');
+    icon.removeClass().addClass('fa fa-arrow-right');
+    window.top.openInRHS(_url);
+    return false;
+}

resources/views/app/mc.blade.php

@@ -7,6 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <link href="/css/app.css" rel="stylesheet">
+    <link href="/css/style.css" rel="stylesheet">
     <link href="/v-splitter-px/v-splitter.css" rel="stylesheet" >
     <script src="/v-splitter-px/v-splitter.js"></script>
     <title>Stag | MCP</title>
@@ -26,6 +27,37 @@
             $('#stag_mcp_rhs').attr('src', _url);
             return false;
         };
+        window.toggleRHS = function() {
+            var body = $('body'), leftPanel = $('.app-left-panel');
+            if(!body.is('.stag_rhs_collapsed')) {
+                body.addClass('stag_rhs_collapsed');
+                leftPanel.attr('data-prev-style', leftPanel.attr('style'));
+                leftPanel.attr('style', '');
+                leftPanel.removeClass('col-9').addClass('col-12');
+                return 'collapsed';
+            }
+            else {
+                if(leftPanel.attr('data-prev-style')) {
+                    leftPanel.attr('style', leftPanel.attr('data-prev-style'));
+                }
+                leftPanel.attr('data-prev-style', '');
+                leftPanel.removeClass('col-12').addClass('col-9');
+                body.removeClass('stag_rhs_collapsed');
+                return 'expanded';
+            }
+        }
+        window.showRHS = function() {
+            var body = $('body'), leftPanel = $('.app-left-panel');
+            if(body.is('.stag_rhs_collapsed')) {
+                if(leftPanel.attr('data-prev-style')) {
+                    leftPanel.attr('style', leftPanel.attr('data-prev-style'));
+                }
+                leftPanel.attr('data-prev-style', '');
+                leftPanel.removeClass('col-12').addClass('col-9');
+                body.removeClass('stag_rhs_collapsed');
+                return 'expanded';
+            }
+        }
     </script>
 </body>
 </html>

resources/views/layouts/patient.blade.php

@@ -303,7 +303,7 @@
                             <div>
                                 <a href="#"
                                    class="btn btn-sm btn-primary mt-2 font-weight-bold px-3"
-                                   onclick="return window.top.openInRHS('/pro/meet/{{ $patient->uid }}')">
+                                   onclick="return openInRHS('/pro/meet/{{ $patient->uid }}')">
                                     <i class="fa fa-phone mr-1"></i>
                                     Go to the client's meeting page
                                 </a>

resources/views/layouts/template.blade.php

@@ -65,6 +65,10 @@
                 </form>
             </div>
         </div>
+
+        <a href="#" class="stag_rhs_toggle d-none d-md-block" title="Toggle Video Pane">
+            <i class="fa fa-arrow-right"></i>
+        </a>
     </nav>