From 7b5efb4ffa52c3499b74e3ffd362ce9ff694f9b1 Mon Sep 17 00:00:00 2001
From: ramram1515 <blackspot83@gmail.com>
Date: Mon, 6 Jul 2026 16:41:51 +0800
Subject: [PATCH] fix(store): adjust responsive breakpoint to lg and add close
 button to sidebar drawer

---
 resources/views/store/layouts/app.blade.php   | 22 ++++++++++---------
 .../views/store/partials/sidebar.blade.php    |  7 ++++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/resources/views/store/layouts/app.blade.php b/resources/views/store/layouts/app.blade.php
index 874b52f..7ed7e65 100644
--- a/resources/views/store/layouts/app.blade.php
+++ b/resources/views/store/layouts/app.blade.php
@@ -1,38 +1,38 @@
 @extends('layouts.web', ['title' => ($pageTitle ?? 'Store') . ' — Verde'])
 
 @section('content')
-<div class="flex min-h-screen flex-col md:flex-row bg-neutral-50 md:bg-white">
+<div class="flex min-h-screen flex-col lg:flex-row bg-neutral-50 lg:bg-white">
     <!-- Mobile Backdrop -->
-    <div id="mobile-sidebar-backdrop" class="fixed inset-0 z-40 hidden bg-neutral-900/50 backdrop-blur-sm md:hidden"></div>
+    <div id="mobile-sidebar-backdrop" class="fixed inset-0 z-40 hidden bg-neutral-900/50 backdrop-blur-sm lg:hidden"></div>
 
     <!-- Sidebar Container -->
-    <div id="store-sidebar" class="fixed inset-y-0 left-0 z-50 w-64 -translate-x-full transition-transform duration-300 md:static md:translate-x-0 md:h-screen md:sticky md:top-0">
+    <div id="store-sidebar" class="fixed inset-y-0 left-0 z-50 w-64 -translate-x-full transition-transform duration-300 lg:static lg:translate-x-0 lg:h-screen lg:sticky lg:top-0">
         @include('store.partials.sidebar')
     </div>
 
     <div class="flex min-w-0 flex-1 flex-col">
         {{-- Topbar --}}
-        <header class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-neutral-200 bg-white/90 px-4 md:px-6 backdrop-blur">
-            <div class="flex items-center gap-2 md:gap-3">
-                <button id="mobile-menu-toggle" class="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 md:hidden">
+        <header class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-neutral-200 bg-white/90 px-4 lg:px-6 backdrop-blur">
+            <div class="flex items-center gap-2 lg:gap-3">
+                <button id="mobile-menu-toggle" class="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 lg:hidden">
                     <i data-lucide="menu" class="h-5 w-5"></i>
                 </button>
                 @if (! empty($pageTitle))
                     <h1 class="text-sm font-semibold tracking-tight text-neutral-900 truncate">{{ $pageTitle }}</h1>
                 @endif
                 @if (! empty($pageSubtitle))
-                    <span class="hidden md:inline text-sm text-neutral-400">·</span>
-                    <span class="hidden md:inline text-sm text-neutral-500 truncate">{{ $pageSubtitle }}</span>
+                    <span class="hidden lg:inline text-sm text-neutral-400">·</span>
+                    <span class="hidden lg:inline text-sm text-neutral-500 truncate">{{ $pageSubtitle }}</span>
                 @endif
             </div>
 
             <div class="flex items-center gap-3">
-                <span id="topbar-user" class="hidden md:inline text-sm text-neutral-600"></span>
+                <span id="topbar-user" class="hidden lg:inline text-sm text-neutral-600"></span>
                 <button id="topbar-logout" class="btn-ghost px-3 py-1.5 text-xs">Sign out</button>
             </div>
         </header>
 
-        <main class="flex-1 px-4 md:px-6 py-6 md:py-8">
+        <main class="flex-1 px-4 lg:px-6 py-6 lg:py-8">
             @yield('page')
         </main>
     </div>
@@ -51,6 +51,7 @@
     const sidebar = document.getElementById('store-sidebar');
     const backdrop = document.getElementById('mobile-sidebar-backdrop');
     const toggleBtn = document.getElementById('mobile-menu-toggle');
+    const closeBtn = document.getElementById('mobile-sidebar-close');
 
     function toggleSidebar() {
         const isOpen = !sidebar.classList.contains('-translate-x-full');
@@ -66,6 +67,7 @@
     }
 
     toggleBtn?.addEventListener('click', toggleSidebar);
+    closeBtn?.addEventListener('click', toggleSidebar);
     backdrop?.addEventListener('click', toggleSidebar);
 </script>
 @endsection
diff --git a/resources/views/store/partials/sidebar.blade.php b/resources/views/store/partials/sidebar.blade.php
index d7e957c..baf1470 100644
--- a/resources/views/store/partials/sidebar.blade.php
+++ b/resources/views/store/partials/sidebar.blade.php
@@ -17,14 +17,17 @@
     };
 @endphp
 
-<aside class="flex h-full w-64 flex-col border-r border-neutral-200 bg-white md:bg-neutral-50/50 shadow-xl md:shadow-none">
-    <div class="flex h-14 items-center border-b border-neutral-200 px-6">
+<aside class="flex h-full w-64 flex-col border-r border-neutral-200 bg-white lg:bg-neutral-50/50 shadow-xl lg:shadow-none">
+    <div class="flex h-14 items-center justify-between border-b border-neutral-200 px-6">
         <div class="flex items-center gap-2">
             <div class="flex h-8 w-8 items-center justify-center rounded bg-verde-600 text-white">
                 <i data-lucide="store" class="h-5 w-5"></i>
             </div>
             <span class="text-sm font-bold tracking-tight text-neutral-900">Store Portal</span>
         </div>
+        <button id="mobile-sidebar-close" class="lg:hidden p-1 -mr-2 text-neutral-500 hover:text-neutral-900 rounded-md">
+            <i data-lucide="x" class="h-5 w-5"></i>
+        </button>
     </div>
 
     <div class="flex-1 overflow-y-auto px-3 py-6">