From 76f08d95c7fb6b0de30056891c12947ba02e7fb4 Mon Sep 17 00:00:00 2001 From: sundayenglish Date: Tue, 24 Jun 2025 08:55:13 +0700 Subject: [PATCH] Add Soft UI --- app/Livewire/Dashboard.php | 5 +- config/livewire.php | 160 +++++++++++++ resources/views/admin/dashboard.blade.php | 10 + resources/views/component/dashboard.blade.php | 5 + resources/views/layouts/app.blade.php | 57 +++-- .../views/layouts/partials/footer.blade.php | 13 + .../views/layouts/partials/navbar.blade.php | 145 ++++++++++-- .../views/layouts/partials/sidebar.blade.php | 222 ++++++++++++++++-- resources/views/livewire/dashboard.blade.php | 5 - 9 files changed, 554 insertions(+), 68 deletions(-) create mode 100644 config/livewire.php create mode 100644 resources/views/admin/dashboard.blade.php create mode 100644 resources/views/component/dashboard.blade.php create mode 100644 resources/views/layouts/partials/footer.blade.php delete mode 100644 resources/views/livewire/dashboard.blade.php diff --git a/app/Livewire/Dashboard.php b/app/Livewire/Dashboard.php index 993c603..ba6a3ec 100644 --- a/app/Livewire/Dashboard.php +++ b/app/Livewire/Dashboard.php @@ -8,6 +8,9 @@ class Dashboard extends Component { public function render() { - return view('livewire.dashboard')->layout('layouts.app', ['title' => 'Dashboard']); + + return view('component.dashboard') + ->layoutData(['title' => 'Dashboard']) // truyền thêm data nếu cần + ->layout('layouts.app'); } } diff --git a/config/livewire.php b/config/livewire.php new file mode 100644 index 0000000..ccc3931 --- /dev/null +++ b/config/livewire.php @@ -0,0 +1,160 @@ + 'App\\Livewire', + + /* + |--------------------------------------------------------------------------- + | View Path + |--------------------------------------------------------------------------- + | + | This value is used to specify where Livewire component Blade templates are + | stored when running file creation commands like `artisan make:livewire`. + | It is also used if you choose to omit a component's render() method. + | + */ + + 'view_path' => resource_path('views/component'), + + /* + |--------------------------------------------------------------------------- + | Layout + |--------------------------------------------------------------------------- + | The view that will be used as the layout when rendering a single component + | as an entire page via `Route::get('/post/create', CreatePost::class);`. + | In this case, the view returned by CreatePost will render into $slot. + | + */ + + 'layout' => 'components.layouts.app', + + /* + |--------------------------------------------------------------------------- + | Lazy Loading Placeholder + |--------------------------------------------------------------------------- + | Livewire allows you to lazy load components that would otherwise slow down + | the initial page load. Every component can have a custom placeholder or + | you can define the default placeholder view for all components below. + | + */ + + 'lazy_placeholder' => null, + + /* + |--------------------------------------------------------------------------- + | Temporary File Uploads + |--------------------------------------------------------------------------- + | + | Livewire handles file uploads by storing uploads in a temporary directory + | before the file is stored permanently. All file uploads are directed to + | a global endpoint for temporary storage. You may configure this below: + | + */ + + 'temporary_file_upload' => [ + 'disk' => null, // Example: 'local', 's3' | Default: 'default' + 'rules' => null, // Example: ['file', 'mimes:png,jpg'] | Default: ['required', 'file', 'max:12288'] (12MB) + 'directory' => null, // Example: 'tmp' | Default: 'livewire-tmp' + 'middleware' => null, // Example: 'throttle:5,1' | Default: 'throttle:60,1' + 'preview_mimes' => [ // Supported file types for temporary pre-signed file URLs... + 'png', 'gif', 'bmp', 'svg', 'wav', 'mp4', + 'mov', 'avi', 'wmv', 'mp3', 'm4a', + 'jpg', 'jpeg', 'mpga', 'webp', 'wma', + ], + 'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated... + 'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs... + ], + + /* + |--------------------------------------------------------------------------- + | Render On Redirect + |--------------------------------------------------------------------------- + | + | This value determines if Livewire will run a component's `render()` method + | after a redirect has been triggered using something like `redirect(...)` + | Setting this to true will render the view once more before redirecting + | + */ + + 'render_on_redirect' => false, + + /* + |--------------------------------------------------------------------------- + | Eloquent Model Binding + |--------------------------------------------------------------------------- + | + | Previous versions of Livewire supported binding directly to eloquent model + | properties using wire:model by default. However, this behavior has been + | deemed too "magical" and has therefore been put under a feature flag. + | + */ + + 'legacy_model_binding' => false, + + /* + |--------------------------------------------------------------------------- + | Auto-inject Frontend Assets + |--------------------------------------------------------------------------- + | + | By default, Livewire automatically injects its JavaScript and CSS into the + | and of pages containing Livewire components. By disabling + | this behavior, you need to use @livewireStyles and @livewireScripts. + | + */ + + 'inject_assets' => true, + + /* + |--------------------------------------------------------------------------- + | Navigate (SPA mode) + |--------------------------------------------------------------------------- + | + | By adding `wire:navigate` to links in your Livewire application, Livewire + | will prevent the default link handling and instead request those pages + | via AJAX, creating an SPA-like effect. Configure this behavior here. + | + */ + + 'navigate' => [ + 'show_progress_bar' => true, + 'progress_bar_color' => '#2299dd', + ], + + /* + |--------------------------------------------------------------------------- + | HTML Morph Markers + |--------------------------------------------------------------------------- + | + | Livewire intelligently "morphs" existing HTML into the newly rendered HTML + | after each update. To make this process more reliable, Livewire injects + | "markers" into the rendered Blade surrounding @if, @class & @foreach. + | + */ + + 'inject_morph_markers' => true, + + /* + |--------------------------------------------------------------------------- + | Pagination Theme + |--------------------------------------------------------------------------- + | + | When enabling Livewire's pagination feature by using the `WithPagination` + | trait, Livewire will use Tailwind templates to render pagination views + | on the page. If you want Bootstrap CSS, you can specify: "bootstrap" + | + */ + + 'pagination_theme' => 'tailwind', +]; diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php new file mode 100644 index 0000000..30c79a2 --- /dev/null +++ b/resources/views/admin/dashboard.blade.php @@ -0,0 +1,10 @@ +{{-- resources/views/admin/dashboard.blade.php --}} +@extends('layouts.app') + +@section('title', 'Dashboard') + +@section('content') + + {{-- Gọi Livewire component --}} + +@endsection diff --git a/resources/views/component/dashboard.blade.php b/resources/views/component/dashboard.blade.php new file mode 100644 index 0000000..0867b79 --- /dev/null +++ b/resources/views/component/dashboard.blade.php @@ -0,0 +1,5 @@ +{{-- resources/views/component/dashboard.blade.php --}} +
+

Xin chào

+ {{-- Thêm các phần tử con khác ở đây --}} +
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index ee36add..d8c8703 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,30 +1,33 @@ -{{-- resources/views/layouts/soft-ui.blade.php --}} - - + + + + @yield('title', 'Admin Page') - @yield('title', 'Dashboard') + {{-- Favicons --}} + + - {{-- 1. Soft UI CSS --}} - + {{-- Fonts + Icons --}} + + + + - {{-- 2. Google fonts / Icons (nếu cần) --}} - + {{-- CSS chính --}} + - {{-- 3. Livewire --}} + {{-- Livewire --}} @livewireStyles - {{-- 4. CSS bổ sung --}} - @stack('css') + {{-- Page-specific CSS --}} + @stack('styles') - {{-- Ảnh nền header (tùy chọn) --}} -
- {{-- Sidebar --}} @include('layouts.partials.sidebar') @@ -32,20 +35,30 @@ {{-- Navbar --}} @include('layouts.partials.navbar') - {{-- Nội dung chính --}}
- @yield('content') + {{-- Nội dung chính: Livewire sẽ render vào đây --}} + {{ $slot }} + + {{-- Footer --}} + @include('layouts.partials.footer')
- {{-- 5. Core JS bundle (đã gồm Popper & Bootstrap) --}} - + {{-- JS core --}} + + + + + + + + {{-- Nepcha Analytics --}} + - {{-- 6. Livewire --}} + {{-- Livewire --}} @livewireScripts - {{-- 7. JS bổ sung --}} - @stack('js') + {{-- Page-specific JS --}} + @stack('scripts') - diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php new file mode 100644 index 0000000..5d63661 --- /dev/null +++ b/resources/views/layouts/partials/footer.blade.php @@ -0,0 +1,13 @@ +
+
+
+
+
+ © {{ date('Y') }}, made with by + GK + for a better web. +
+
+
+
+
diff --git a/resources/views/layouts/partials/navbar.blade.php b/resources/views/layouts/partials/navbar.blade.php index 6c3f7ba..32eb461 100644 --- a/resources/views/layouts/partials/navbar.blade.php +++ b/resources/views/layouts/partials/navbar.blade.php @@ -1,22 +1,125 @@ -{{-- resources/views/layouts/partials/navbar-soft-ui.blade.php --}} -