To hide the sidebar and top bar in a specific Filament 3 page without creating a new panel, you can customize the layout for that particular page. Here's a step-by-step solution:
-
Create a Custom Layout: Create a custom layout that does not include the sidebar and top bar. You can extend the default layout and remove the parts you don't need.
-
Apply the Custom Layout to Your Page: Use the custom layout for the specific page you want to hide the sidebar and top bar.
Here's an example of how you can achieve this:
Step 1: Create a Custom Layout
Create a new Blade file for your custom layout, for example, resources/views/layouts/custom.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Your custom content without sidebar and top bar -->
@yield('content')
</div>
</body>
</html>
Step 2: Apply the Custom Layout to Your Page
In your Filament page class, specify the custom layout. For example, if you have a page class MyCustomPage, you can do the following:
namespace App\Filament\Pages;
use Filament\Pages\Page;
class MyCustomPage extends Page
{
protected static string $view = 'filament.pages.my-custom-page';
public function render()
{
return view('filament.pages.my-custom-page')->layout('layouts.custom');
}
}
Step 3: Create the Page View
Create the view file for your custom page, for example, resources/views/filament/pages/my-custom-page.blade.php:
@extends('layouts.custom')
@section('content')
<div class="container mx-auto py-8">
<h1 class="text-2xl font-bold">My Custom Page</h1>
<p>This is a custom page without the sidebar and top bar.</p>
</div>
@endsection
Step 4: Define the Route
Ensure you have defined the route for your custom page in your routes/web.php:
use App\Filament\Pages\MyCustomPage;
Route::get('/my-custom-page', MyCustomPage::class)->name('my-custom-page');
This setup will render your custom page without the sidebar and top bar, using the custom layout you created. You can further customize the layout and content as needed.