From 75d610200b80e530b8b4b05461c3e84b3f03692d Mon Sep 17 00:00:00 2001
From: "DESKTOP-T0O5CDB\\DESK-555BD" <ivancheahkf@gmail.com>
Date: Thu, 11 Jan 2024 20:52:55 -0700
Subject: [PATCH] make it more mobile friendly.

---
 Views/Home/Index.cshtml | 10 ++++++++--
 wwwroot/css/site.css    | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
index 8ef5dce..ef09f7c 100644
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -11,12 +11,18 @@
 }
 <div class="container">
     <div class="row mt-2">
-        <div class="d-flex justify-content-center">
+        <div class="d-flex lubelogger-navbar justify-content-center">
+            <div class="lubelogger-navbar-button">
+                <button class="navbar-toggler" type="button">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+            </div>
             <img src="/defaults/lubelogger_logo.png"/>
+            <div class="lubelogger-navbar-button"></div>
         </div>
     </div>
     <hr />
-    <ul class="nav nav-tabs" id="homeTab" role="tablist">
+    <ul class="nav nav-tabs lubelogger-tab" id="homeTab" role="tablist">
         <li class="nav-item" role="presentation">
             <button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front me-2"></i>Garage</button>
         </li>
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index 0f9aa06..2b1eef9 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -133,3 +133,17 @@ html {
     }
 }
 
+/*Media Queries*/
+@media (max-width: 576px){
+    .lubelogger-tab{
+        display:none;
+    }
+    .lubelogger-navbar{
+        justify-content: space-between;
+    }
+}
+@media(min-width: 576px){
+    .lubelogger-navbar-button {
+        display: none;
+    }
+}
\ No newline at end of file