Autohide leftnav when on note single

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 17,
+    'asset_version' => 18,
 
     'temp_dir' => env('TEMP_DIR'),
 

public/css/style.css

@@ -481,36 +481,73 @@ input.search_field, textarea.search_field {
     background-color: #fff !important;
 }
 
-@media (min-width: 1000px) {
-    .navbar.navbar-dark {
-        height: 55px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 9999;
-    }
-    .main-row > .sidebar {
-        width: 180px;
-        min-width: 180px;
-        position: fixed;
-        left: 0;
-        top: 55px;
-        z-index: 8;
-        height: calc(100% - 55px);
-        overflow-y: overlay;
-        padding-bottom: 4rem;
-    }
-    .main-row {
-        padding-left: 180px;
-    }
-    .navbar.navbar-dark+[role="main"] {
-        padding-top: 55px;
-    }
-    .stag-popup .navbar.navbar-dark+[role="main"] {
-        padding-top: 0;
-    }
+.navbar.navbar-dark {
+    height: 55px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+}
+.main-row {
+    padding-left: 180px;
+}
+.main-row.autohide-leftnav {
+    padding-left: 30px;
 }
+.main-row > .sidebar {
+    width: 180px;
+    min-width: 180px;
+    position: fixed;
+    left: 0;
+    top: 55px;
+    z-index: 8;
+    height: calc(100% - 55px);
+    padding-bottom: 4rem;
+    border-right: 1px solid #ddd;
+    overflow: hidden;
+}
+.main-row > .sidebar:hover {
+    overflow-y: overlay
+}
+.navbar.navbar-dark + [role="main"] {
+    padding-top: 55px;
+}
+.main-row > .sidebar .nav .nav-item a {
+    white-space: nowrap;
+}
+.main-row.autohide-leftnav > .sidebar {
+    width: 30px;
+    min-width: 30px;
+    transition: width 0.2s ease;
+}
+.main-row.autohide-leftnav > .sidebar:not(:hover):after {
+    content: '(hover for menu)';
+    position: absolute;
+    top: 125px;
+    left: 5px;
+    transform-origin: top left;
+    transform: rotate(
+      -90deg);
+    white-space: nowrap;
+    font-size: 12px;
+    font-family: verdana;
+    color: #666;
+}
+.main-row.autohide-leftnav > .sidebar ul {
+    opacity: 0;
+}
+.main-row.autohide-leftnav > .sidebar:hover {
+    width: 180px;
+}
+.main-row.autohide-leftnav > .sidebar:hover ul {
+    opacity: 1;
+}
+
+.stag-popup .navbar.navbar-dark + [role="main"] {
+    padding-top: 0;
+}
+
 .font-smaller {
     font-size: 11px !important;
 }
@@ -2003,6 +2040,7 @@ body.in-iframe .main-row > .sidebar {
     top: 55px;
     max-height: calc(100vh - 55px) !important;
     height: calc(100vh - 55px) !important;
+    z-index: 1;
 }
 .note-container .note-lhs-tree.fixed ~ .note-rhs-content {
     margin-left: 220px;

resources/views/app/patient/note/dashboard.blade.php

@@ -122,8 +122,8 @@
         </h6>
     </div>
 
-    <span class="card mb-0 {{ $note->is_cancelled ? 'cancelled-item' : '' }}">
-        <div class="card-header d-flex align-items-start px-3 py-2 border-bottom" id="note-card-header">
+    <span class="card mb-0 {{ $note->is_cancelled ? 'cancelled-item' : '' }} border-0 rounded-0">
+        <div class="card-header d-flex align-items-start px-3 py-2 border-bottom rounded-0" id="note-card-header">
             <div class="pr-2">
                 {{$note->title}}
                 @if(!$note->is_signed_by_hcp || $pro->pro_type === 'ADMIN')
@@ -881,7 +881,7 @@
                                 </span>
                             @endforeach
                         @else
-                            <div class="alert alert-info">No note reasons</div>
+                            <div class="alert alert-info position-static">No note reasons</div>
                         @endif
                         </div>
                     </div>

resources/views/layouts/patient.blade.php

@@ -2,14 +2,14 @@
 <?php
 /** @var \App\Models\Client $patient */
 ?>
+<?php $routeName = request()->route()->getName(); ?>
 @section('content')
 	<div class="container-fluid h-100">
-		<div class="main-row h-100 {{ !request()->input('popupmode') ? '' : 'px-0' }}">
+		<div class="main-row h-100 {{ !request()->input('popupmode') ? '' : 'px-0' }} {{$routeName === 'patients.view.notes.view.dashboard' ? 'autohide-leftnav' : ''}}">
 			@if(!request()->input('popupmode'))
-			<nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse px-0">
+			<nav id="sidebarMenu" class="d-block bg-light sidebar collapse px-0">
 				<div class="sidebar-sticky pt-3">
 					<ul class="nav flex-column mcp-theme-1">
-						<?php $routeName = request()->route()->getName(); ?>
 						<li class="nav-item">
 							<a class="nav-link {{ strpos($routeName, 'patients.view.dashboard') === 0 ? 'active' : '' }}"
 							   href="{{ route('patients.view.dashboard', ['patient' => $patient]) }}">Dashboard</a>
@@ -263,7 +263,7 @@
 				</div>
 			</nav>
 			@endif
-			<main role="main" class="w-100">
+			<main role="main" class="w-100 {{$routeName === 'patients.view.notes.view.dashboard' ? 'p-0' : ''}}">
 				@if($pro->is_enrolled_as_mcp && !$patient->mcp)
 					<div class="alert alert-info bg-white mt-3 mcp-theme-1 p-3 hide-inside-ticket-popup">
 						<div class="font-size-16">
@@ -305,7 +305,7 @@
 						</div>
 					</div>
 				@endif
-				<div class="card mt-3" id="patient-header">
+				<div class="card {{$routeName === 'patients.view.notes.view.dashboard' ? 'card m-0 border-0 rounded-0' : 'mt-3'}}" id="patient-header">
 					<div class="card-header py-1 hide-inside-ticket-popup">
 						<?php
 						$thumbnail = $patient->profile_picture_base64;
@@ -826,7 +826,7 @@
 							</div>
 						@endif
 					</div>--}}
-					<div class="card-body">
+					<div class="card-body {{$routeName === 'patients.view.notes.view.dashboard' ? 'p-0' : ''}}">
 						{{--<h1 class="h3">@yield('section-title')</h1>--}}
 						<div class="mcp-theme-1">
 							@yield('inner-content')