From e006c158fcdf47a5dfb77c1e0d2af29a93dd41ee Mon Sep 17 00:00:00 2001
From: "DESKTOP-GENO133\\IvanPlex" <ivancheahkf@gmail.com>
Date: Thu, 11 Jan 2024 23:04:33 -0700
Subject: [PATCH] full screen navbar for small devices.

---
 Views/Home/Index.cshtml    | 28 +++++++----
 Views/Vehicle/Index.cshtml | 44 +++++++++++++++--
 wwwroot/css/site.css       | 97 +++++++++++++++++++++++++++++---------
 wwwroot/js/shared.js       | 12 +++++
 4 files changed, 148 insertions(+), 33 deletions(-)

diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
index ef09f7c..2dd47ce 100644
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -9,16 +9,29 @@
 @section Scripts {
     <script src="~/js/garage.js" asp-append-version="true"></script>
 }
+<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
+    <ul class="navbar-nav" id="homeTab" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button>
+        </li>
+        @if (enableAuth)
+        {
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" onclick="performLogOut()"><span class="display-3 ms-2"><i class="bi bi-box-arrow-right me-2"></i>Logout</span></button>
+            </li>
+        }
+    </ul>
+</div>
 <div class="container">
     <div class="row mt-2">
-        <div class="d-flex lubelogger-navbar justify-content-center">
+        <div class="d-flex lubelogger-navbar">
+            <img src="/defaults/lubelogger_logo.png" />
             <div class="lubelogger-navbar-button">
-                <button class="navbar-toggler" type="button">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
+                <button type="button" class="btn btn-dark" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
             </div>
-            <img src="/defaults/lubelogger_logo.png"/>
-            <div class="lubelogger-navbar-button"></div>
         </div>
     </div>
     <hr />
@@ -44,7 +57,6 @@
             </div>
         </div>
         <div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
-
         </div>
     </div>
 </div>
@@ -52,11 +64,11 @@
 <div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content" id="addVehicleModalContent">
-           
         </div>
     </div>
 </div>
 <script>
     loadGarage();
     loadSettings();
+    bindWindowResize();
 </script>
\ No newline at end of file
diff --git a/Views/Vehicle/Index.cshtml b/Views/Vehicle/Index.cshtml
index a71598c..784da81 100644
--- a/Views/Vehicle/Index.cshtml
+++ b/Views/Vehicle/Index.cshtml
@@ -13,16 +13,53 @@
     <script src="~/js/note.js" asp-append-version="true"></script>
     <script src="~/lib/chart-js/chart.umd.js"></script>
 }
+<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
+    <ul class="nav navbar-nav" id="vehicleTab" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" onclick="returnToGarage()"><span class="display-3 ms-2"><i class="bi bi-arrow-left-square"></i>Garage</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><span class="display-3 ms-2"><i class="bi bi-card-checklist me-2"></i>Service Records</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="accident-tab" data-bs-toggle="tab" data-bs-target="#accident-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-exclamation-octagon me-2"></i>Repairs</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="upgrade-tab" data-bs-toggle="tab" data-bs-target="#upgrade-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-wrench-adjustable me-2"></i>Upgrades</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="gas-tab" data-bs-toggle="tab" data-bs-target="#gas-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-fuel-pump me-2"></i>Fuel</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-currency-dollar me-2"></i>Taxes</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-journal-bookmark me-2"></i>Notes</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><div id="reminderBellDiv" style="display:inline-flex;"><i id="reminderBell" class="bi bi-bell me-2"></i></div>Reminders</span></button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-file-bar-graph me-2"></i>Reports</span></button>
+        </li>
+        <li class="nav-item dropdown" role="presentation">
+            <button onclick="deleteVehicle(@Model.Id)" class="dropdown-item"><span class="display-3 ms-2"><i class="bi bi-trash me-2"></i>Delete Vehicle</span></button>
+        </li>
+    </ul>
+</div>
 <div class="container">
     <div class="row">
         <div class="d-flex justify-content-between">
-            <button onclick="returnToGarage()" class="btn btn-secondary btn-md mt-1 mb-1"><i class="bi bi-arrow-left-square"></i></button>
+            <button onclick="returnToGarage()" class="lubelogger-tab btn btn-secondary btn-md mt-1 mb-1"><i class="bi bi-arrow-left-square"></i></button>
             <h1 class="text-truncate display-4">@($"{Model.Year} {Model.Make} {Model.Model}")<small class="text-body-secondary">@($"(#{Model.LicensePlate})")</small></h1>
-            <button onclick="editVehicle(@Model.Id)" class="btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button>
+            <button onclick="editVehicle(@Model.Id)" class="lubelogger-tab btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button>
+            <div class="lubelogger-navbar-button">
+                <button type="button" class="btn btn-dark" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
+            </div>
         </div>
     </div>
     <hr />
-    <ul class="nav nav-tabs" id="vehicleTab" role="tablist">
+    <ul class="nav nav-tabs lubelogger-tab" id="vehicleTab" role="tablist">
         <li class="nav-item" role="presentation">
             <button class="nav-link active" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><i class="bi bi-card-checklist me-2"></i>Service Records</button>
         </li>
@@ -87,4 +124,5 @@
     function GetVehicleId() {
         return { vehicleId: @Model.Id};
     }
+    bindWindowResize();
 </script>
\ No newline at end of file
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index 2b1eef9..14fc847 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -25,15 +25,15 @@ html {
 }
 
 
-.card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
-}
+    .card:hover {
+        transform: scale(1.05);
+        box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+    }
 
-.vehicleDetailTabContainer{
-    max-height:65vh;
-    overflow-y:auto;
-    overflow-x:auto;
+.vehicleDetailTabContainer {
+    max-height: 65vh;
+    overflow-y: auto;
+    overflow-x: auto;
 }
 
 @media print {
@@ -50,27 +50,31 @@ html {
         color: #000 !important;
         overflow: visible;
     }
+
     td {
         color: #000 !important;
     }
-    td.col-1{
-        width:10%;
-    }
+
+        td.col-1 {
+            width: 10%;
+        }
+
     th.col-1 {
         width: 10%;
     }
+
     th {
         color: #000 !important;
     }
 }
 
-.chartContainer{
-    height:30vh;
-    overflow:auto;
+.chartContainer {
+    height: 30vh;
+    overflow: auto;
 }
 
-.vehicleNoteContainer{
-    height:40vh;
+.vehicleNoteContainer {
+    height: 40vh;
 }
 
 .display-7 {
@@ -134,16 +138,65 @@ html {
 }
 
 /*Media Queries*/
-@media (max-width: 576px){
-    .lubelogger-tab{
-        display:none;
+@media (max-width: 576px) {
+    .lubelogger-tab {
+        display: none;
     }
-    .lubelogger-navbar{
+
+    .lubelogger-navbar {
         justify-content: space-between;
     }
+
+    .lubelogger-navbar-button {
+        display: flex;
+        align-items: center;
+    }
+
+    .lubelogger-navbar-button > button {
+        padding: 0;
+        font-size: 2rem;
+    }
+
+    .lubelogger-menu-icon {
+        display: inline-block;
+        width: 1.5em;
+        height: 1.5em;
+    }
+
+    .lubelogger-mobile-nav {
+        background-color: var(--bs-body-bg);
+        height: 100vh;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin: 0;
+        display: none;
+        z-index: 10;
+    }
+
+    .lubelogger-mobile-nav-show {
+        display: block;
+    }
+    .lubelogger-mobile-nav > ul > li > .nav-link.active {
+        color: #6ea8fe;
+    }
 }
-@media(min-width: 576px){
+
+@media(min-width: 576px) {
+    .lubelogger-mobile-nav-show {
+        display: none;
+    }
+
+    .lubelogger-mobile-nav {
+        display: none;
+    }
+
+    .lubelogger-navbar {
+        justify-content: center;
+    }
+
     .lubelogger-navbar-button {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/wwwroot/js/shared.js b/wwwroot/js/shared.js
index 53d6909..d0ea891 100644
--- a/wwwroot/js/shared.js
+++ b/wwwroot/js/shared.js
@@ -130,4 +130,16 @@ function initDatePicker(input, futureOnly) {
             autoclose: true
         });
     }
+}
+
+function showMobileNav() {
+    $(".lubelogger-mobile-nav").addClass("lubelogger-mobile-nav-show");
+}
+function hideMobileNav() {
+    $(".lubelogger-mobile-nav").removeClass("lubelogger-mobile-nav-show");
+}
+function bindWindowResize() {
+    $(window).resize(function () {
+        hideMobileNav();
+    });
 }
\ No newline at end of file