Sleep study layout, leftnav, scroll behavior

public/css/style.css

@@ -3788,4 +3788,12 @@ table.v-top th {
 }
 .mcp-theme-1 .v-sep-after {
     border-right: 3px solid #ccc;
+}
+
+.ss-leftnav>a {
+    padding: 0.5rem 1.25rem;
+    width: 250px;
+}
+.ss-content>[data-key] {
+    min-height: 100%;
 }

resources/views/app/patient/sleep-study.blade.php

@@ -1,22 +1,176 @@
 @extends ('layouts.patient')
 @section('inner-content')
 
-    <div id="sleepStudyComponent">
+    <div>
 
         <h4 class="font-weight-bold mb-0 font-size-16">Sleep Study</h4>
 
-        <hr class="m-neg-4">
+        <hr class="m-neg-4 mb-0">
+
+        <div class="d-flex align-items-start m-neg-4" id="sleepStudyContainer">
+            <div class="ss-leftnav border-right h-100 mh-100 overflow-overlay-on-hover">
+                <a href="#" data-target-key="sleep-apnea-background" class="d-block py-1 border-bottom text-nowrap bg-aliceblue font-weight-bold">Sleep Apnea Background</a>
+                <a href="#" data-target-key="signs-and-symptoms" class="d-block py-1 border-bottom text-nowrap">Signs &amp; Symptoms</a>
+                <a href="#" data-target-key="patient-interest" class="d-block py-1 border-bottom text-nowrap">Patient Interest</a>
+                <a href="#" data-target-key="insurance-coverage" class="d-block py-1 border-bottom text-nowrap">Insurance Coverage</a>
+                <a href="#" data-target-key="sleep-study-address" class="d-block py-1 border-bottom text-nowrap">Sleep Study Address</a>
+                <a href="#" data-target-key="manager" class="d-block py-1 border-bottom text-nowrap">Manager</a>
+                <a href="#" data-target-key="medical-necessity" class="d-block py-1 border-bottom text-nowrap">Medical Necessity</a>
+                <a href="#" data-target-key="study-instructions" class="d-block py-1 border-bottom text-nowrap">Study Instructions</a>
+                <a href="#" data-target-key="study-order" class="d-block py-1 border-bottom text-nowrap">Study Order</a>
+                <a href="#" data-target-key="study-authorization" class="d-block py-1 border-bottom text-nowrap">Study Authorization</a>
+                <a href="#" data-target-key="device-allocation" class="d-block py-1 border-bottom text-nowrap">Device Allocation</a>
+                <a href="#" data-target-key="shipment-to-manager" class="d-block py-1 border-bottom text-nowrap">Shipment To Manager</a>
+                <a href="#" data-target-key="receipt-by-manager" class="d-block py-1 border-bottom text-nowrap">Receipt By Manager</a>
+                <a href="#" data-target-key="shipment-to-client" class="d-block py-1 border-bottom text-nowrap">Shipment To Client</a>
+                <a href="#" data-target-key="receipt-by-client" class="d-block py-1 border-bottom text-nowrap">Receipt By Client</a>
+                <a href="#" data-target-key="app-installation" class="d-block py-1 border-bottom text-nowrap">App Installation</a>
+                <a href="#" data-target-key="patient-ready" class="d-block py-1 border-bottom text-nowrap">Patient Ready</a>
+                <a href="#" data-target-key="study-data-status" class="d-block py-1 border-bottom text-nowrap">Study Data Status</a>
+                <a href="#" data-target-key="manager-bill" class="d-block py-1 border-bottom text-nowrap">Manager Bill</a>
+                <a href="#" data-target-key="sleep-specialist" class="d-block py-1 border-bottom text-nowrap">Sleep Specialist</a>
+                <a href="#" data-target-key="watchpat-results" class="d-block py-1 border-bottom text-nowrap">WatchPat Results</a>
+                <a href="#" data-target-key="sleep-specialist-bill" class="d-block py-1 border-bottom text-nowrap">Sleep Specialist Bill</a>
+                <a href="#" data-target-key="results-comm-to-patient" class="d-block py-1 border-bottom text-nowrap">Results Comm. To Patient</a>
+                <a href="#" data-target-key="results-comm-to-doctors" class="d-block py-1 border-bottom text-nowrap">Results Comm. To Doctors</a>
+            </div>
+            <div class="ss-content flex-grow-1 h-100 mh-100 overflow-overlay-on-hover">
+                <div data-key="sleep-apnea-background">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Apnea Background</h4>
+                </div>
+
+                <div data-key="signs-and-symptoms">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Signs &amp; Symptoms</h4>
+                </div>
+
+                <div data-key="patient-interest">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Patient Interest</h4>
+                </div>
+
+                <div data-key="insurance-coverage">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Insurance Coverage</h4>
+                </div>
+
+                <div data-key="sleep-study-address">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Study Address</h4>
+                </div>
+
+                <div data-key="manager">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Manager</h4>
+                </div>
+
+                <div data-key="medical-necessity">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Medical Necessity</h4>
+                </div>
+
+                <div data-key="study-instructions">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Instructions</h4>
+                </div>
+
+                <div data-key="study-order">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Order</h4>
+                </div>
+
+                <div data-key="study-authorization">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Authorization</h4>
+                </div>
+
+                <div data-key="device-allocation">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Device Allocation</h4>
+                </div>
+
+                <div data-key="shipment-to-manager">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Shipment To Manager</h4>
+                </div>
+
+                <div data-key="receipt-by-manager">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Receipt By Manager</h4>
+                </div>
+
+                <div data-key="shipment-to-client">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Shipment To Client</h4>
+                </div>
+
+                <div data-key="receipt-by-client">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Receipt By Client</h4>
+                </div>
+
+                <div data-key="app-installation">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">App Installation</h4>
+                </div>
+
+                <div data-key="patient-ready">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Patient Ready</h4>
+                </div>
+
+                <div data-key="study-data-status">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Study Data Status</h4>
+                </div>
+
+                <div data-key="manager-bill">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Manager Bill</h4>
+                </div>
+
+                <div data-key="sleep-specialist">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Specialist</h4>
+                </div>
+
+                <div data-key="watchpat-results">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">WatchPat Results</h4>
+                </div>
+
+                <div data-key="sleep-specialist-bill">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Sleep Specialist Bill</h4>
+                </div>
+
+                <div data-key="results-comm-to-patient">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Results Comm. To Patient</h4>
+                </div>
+
+                <div data-key="results-comm-to-doctors">
+                    <h4 class="p-2 bg-light font-weight-bold d-block py-1 border-bottom text-nowrap">Results Comm. To Doctors</h4>
+                </div>
+
+            </div>
+        </div>
 
-        Foo
     </div>
 
     <script>
         (function () {
             function init() {
+                adjustContainerHeight();
+                $(window).on('resize', adjustContainerHeight);
+                $(window).on('scroll', adjustContainerHeight);
 
+                $(document)
+                    .off('click.ss-leftnav', '.ss-leftnav>a[data-target-key]')
+                    .on('click.ss-leftnav', '.ss-leftnav>a[data-target-key]', function() {
+                        /*$('div[data-key="' + $(this).attr('data-target-key') + '"]')[0].scrollIntoView({
+                            behavior: "smooth",
+                            inline: "start",
+                            block: "start"
+                        });*/
+                        $('.ss-content').scrollTop(0);
+                        $('.ss-content').scrollTop(
+                            $('div[data-key="' + $(this).attr('data-target-key') + '"]').offset().top -
+                            $('.ss-content').offset().top
+                        );
+                        $(this).addClass('bg-aliceblue font-weight-bold').siblings().removeClass('bg-aliceblue font-weight-bold');
+                        return false;
+                    });
+            }
+            function adjustContainerHeight() {
+                let container = $('#sleepStudyContainer'),
+                    targetHeight = $(window).height() - (container.offset().top - $(window).scrollTop());
+                container.css({
+                    height: targetHeight + 'px',
+                    minHeight: targetHeight + 'px',
+                    maxHeight: targetHeight + 'px',
+                });
             }
 
-            addMCInitializer('sleepStudy', init, '#sleepStudyComponent');
+            addMCInitializer('sleepStudy', init, '#sleepStudyContainer');
         }).call(window);
     </script>
 

resources/views/layouts/patient-header.blade.php

@@ -53,7 +53,7 @@ $addressParts .= implode(", ", $addressPart2);
             </a>
         </div>
     @endif
-    <div class="d-flex justify-content-between pt-2 {{request()->route()->getName() === 'patients.view.notes.view.dashboard' || request()->route()->getName() === 'patients.view.sleep-study' ? 'sticky-note-header' : ''}}" id="patient-top-most-header">
+    <div class="d-flex justify-content-between pt-2 {{request()->route()->getName() === 'patients.view.notes.view.dashboard' ? 'sticky-note-header' : ''}}" id="patient-top-most-header">
         <div class="d-flex align-items-center header-info mb-2">
 
             <h6 class="font-weight-bold">{{$patientName}}</h6>