admin/Verde-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(store): adjust responsive breakpoint to lg and add close button to sidebar drawer

Browse Source
This commit is contained in:
ramram1515
2026-07-06 16:41:51 +08:00
parent 571dfb5c75
commit 7b5efb4ffa
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/views/store/layouts/app.blade.php
View File

@@ -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

7
resources/views/store/partials/sidebar.blade.php
View File

@@ -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">