From b999d51232370993a6bb861242597ccbcd345fc0 Mon Sep 17 00:00:00 2001
From: hiep200311 <hiepmp088@gmail.com>
Date: Fri, 5 Jun 2026 21:06:08 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20expand=20sidebar=20visibility=20to=20all?=
 =?UTF-8?q?=20non-desktop=20screens=20(=E2=89=A4992px)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sidebar.css: change .floating-menu-btn breakpoint from max-width:768px
  to max-width:992px so the button appears on tablets as well
- header.css: move .nav-container hide + .floating-menu-btn show into
  the ≤992px block so desktop nav is hidden and sidebar activates on
  all mobile + tablet viewports (Bootstrap lg breakpoint)
- ≥993px (desktop): header nav visible, sidebar hidden
- ≤992px (tablet + mobile): header nav hidden, sidebar floating button shown"
---
 views/components/header/header.css   | 27 ++++++++++++++-------------
 views/components/sidebar/sidebar.css |  2 +-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/views/components/header/header.css b/views/components/header/header.css
index 7ecb8d4..0106bd3 100644
--- a/views/components/header/header.css
+++ b/views/components/header/header.css
@@ -299,6 +299,20 @@
   .banner-container {
     height: 350px;
   }
+
+  /* Hide desktop nav, show sidebar button on tablet */
+  .nav-container {
+    display: none;
+  }
+
+  .header-contact-section {
+    display: none;
+  }
+
+  /* Show floating menu button on tablet */
+  .floating-menu-btn {
+    display: flex;
+  }
 }
 
 @media (max-width: 768px) {
@@ -311,10 +325,6 @@
     margin: 0 10px;
   }
 
-  .nav-container {
-    display: none; /* Hide desktop nav on mobile */
-  }
-
   .mobile-menu-btn {
     display: block;
   }
@@ -329,10 +339,6 @@
     flex-grow: 1;
   }
 
-  .header-contact-section {
-    display: none; /* Hide contact info on mobile - it will be in sidebar */
-  }
-
   .logo {
     width: 60px;
   }
@@ -349,11 +355,6 @@
   .banner-container {
     height: 300px;
   }
-
-  /* Show floating menu button on mobile */
-  .floating-menu-btn {
-    display: flex;
-  }
 }
 
 @media (max-width: 576px) {
diff --git a/views/components/sidebar/sidebar.css b/views/components/sidebar/sidebar.css
index 20146ce..4aff720 100644
--- a/views/components/sidebar/sidebar.css
+++ b/views/components/sidebar/sidebar.css
@@ -108,7 +108,7 @@
 }
 
 /* Media Queries for Sidebar */
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .floating-menu-btn {
     display: flex;
   }