Page header in topbar | Filament | Page 1

grim horizon Oct 24, 2024, 9:21 AM

#

I want to move the page header (the one with breadcrumbs, title and actions) in the topbar.

I managed to extend some fiels (layout, topbar etc) in order to add the header but I can't seem to make the actions work.

Is this the way to do this. Is there another way i can accomplish this?

sage yarrowBOT Oct 24, 2024, 9:21 AM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

next dock Oct 24, 2024, 10:13 AM

#

There was some chatter about this here: #🤩┊showcase message

There's a few messages further up too

It might at least point you in the right direction

weak willow Oct 24, 2024, 10:16 AM

#

Theres a new plugin https://github.com/diogogpinto/filament-page-context

GitHub

GitHub - diogogpinto/filament-page-context: A Filament plugin that ...

A Filament plugin that automatically injects current request breadcrumbs and page title into the filament() method, enhancing page context and navigation for Filament admin panels. - diogogpinto/fi...

grim horizon Oct 24, 2024, 10:30 AM

#

That is a great plugin but unfortunately does not help me so much.

The idea is to use the empty space from the topbar and inject the page header. Breadcrumbs, tile and actions.

The only thing missing is how can I add actions in the topbar

weak willow Oct 24, 2024, 10:47 AM

#

So that will do the breadcrumbs and title? But you can modfiy it and add in your own actions?

grim horizon Oct 24, 2024, 12:49 PM

#

I managed to move the page header into topbar.

Here's how I did this:

Create a custom layout based on vendor/filament/filament/resources/views/components/layout/index.blade.php
Modify it so that it uses a custom sidebar and custom topbar

topbar is copied from vendor/filament/filament/resources/views/components/topbar/index.blade.php
sidebar is copied from vendor/filament/filament/resources/views/components/sidebar/index.blade.php

In topbar I removed the sections about tenancy and navigation since I won't use them and added an empty <div id="here-is-where-i-need-page-header" />

I also increased the height of the topbar.

In sidebar i just increased the height so it matches the topbar
Create custom header from vendor/filament/filament/resources/views/components/header/index.blade.php

Added @teleport('#here-is-where-i-need-page-header'). This id should match the one from point 2.

Create custom page from vendor/filament/filament/resources/views/components/page/index.blade.php

In my custom page i replaced the <x-filament-panels::header /> with my custom one <x-filament.header />

Here is how to use the new components.

In the custom page that you create, you should have the following:


protected static string $view = 'filament.resources.evaluation-resource.pages.evaluation-details'; // default view that is created by filament

protected static string $layout = 'custom.layouts.index'; // path for point 1

The page view should use your custom page instead of <x-filament-panels::page /> created on point 5.

Now the page header should appear in the topbar.

Let me know what you think about this approach!

signal carbon Oct 26, 2024, 8:32 AM

#

what you did here is really bad practice. every filament update could brake something or some features just won't work. especially when v4 will get released if this application will get upgraded it will be such a headache

#

by the actions, you mean actions to create, delete record right? can you also show how it looks now?

grim horizon Oct 28, 2024, 7:37 AM

#

This is how it looks.

What would be the good practice to achieve the same thing ?

signal carbon Oct 28, 2024, 7:41 AM

#

What's that below breadcrumb?

#Page header in topbar