Ideas : Add group & custom block & actions 1 topSideBar

[Thiktak]

Hello,

I am using your package, and now I implemented some ideas ... but maybe there is a better way.

Issue 1

Is the dark mode title correct ? text-slate-700 dark:text-navy-100 navy-100 seems a bit off in a dark mode.

Idea 1 - Add group.

I know there is NavigationGroup, and subgroup on the main filament package. Effort on these tips or implementing the filament WoW ?

Idea 2 - More than just items

For example, the possibility to include Infolist or custom Html ?

Idea 3 - Add Header, top and/or footer block of Actions ?

For example the header with a triple dot dropdown, or a list of button (group) for top/footer ?

Idea 4 - Possibility to switch left/right sidebar to top (tabs) ?

Or even better: a SideBar and a TopBar ? (with the TopBar we could implement page section (anchor), filters or sub-pages)

Here a preview of some implementation:

If the idea seems good for you I can PR this version or separately, but I think some ideas could be reviewed.

My implementations

Groups

page.blade.php

@php
    $sidebar = static::getResource()::sidebar($this->record);
    $items = collect($sidebar->getNavigationItems())->groupBy(function ($it) {
        return $it->getGroup();
    });
@endphp

...

                @foreach ($items as $group => $groupItems)
                    <h3 class="mt-4 mb-2 text-sm font-semibold text-gray-700 dark:text-gray-200">{{ $group }}</h3>
                    <ul class="space-y-2 font-inter font-medium" wire:ignore>
                        @foreach ($groupItems as $item)
                            @if (!$item->isHidden())
                                    <x-filament-page-with-sidebar::item :active="$item->isActive()" :icon="$item->getIcon()"
                                        :active-icon="$item->getActiveIcon()" :url="$item->getUrl()" :badge="$item->getBadge()" :badgeColor="$item->getBadgeColor()"
                                        :shouldOpenUrlInNewTab="$item->shouldOpenUrlInNewTab()">
                                        {{ $item->getLabel() }}
                                    </x-filament-page-with-sidebar::item>
                            @endif
                        @endforeach
                    </ul>
                @endforeach

group / getGroup is already implemented.

Use with ->group('name') (empty go first)

                PageNavigationItem::make('Matrix')
                    ->url(function () use ($record) {
                        return static::getUrl('matrix', ['record' => $record->id]);
                    })
                    ->icon('heroicon-m-table-cells')
                    ->group('Matrix'),

More than Item ?

page.blade.php

                            @if (!$item->isHidden())
                                @if (is_a($item, \AymanAlhattami\FilamentPageWithSidebar\PageNavigationHTML::class))
                                    {!! $item->getHTML() !!}
                                @elseif(is_a($item, \AymanAlhattami\FilamentPageWithSidebar\PageNavigationBlock::class))
                                    {{ $item->render() }}
                                @else
                                    <x-filament-page-with-sidebar::item [...]

I also created a PageNavigationHTML (in order to add divider <hr />) with html() (or content()) and getHtml().

and new class:

use Closure;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Filament\Navigation\NavigationItem;
use Illuminate\Support\HtmlString;

class PageNavigationBlock extends \Livewire\Component implements HasInfolists
{
    use InteractsWithInfolists;
    use \Filament\Infolists\Components\Concerns\HasChildComponents;

    protected string | Closure | null $group = null;

    public function group(string | Closure | null $group): static
    {
        $this->group = $group;

        return $this;
    }

    public function getGroup(): mixed
    {
        return $this->group;
    }

    public function isHidden()
    {
        return false;
    }

    static public function make(): static
    {
        return new self();
    }

    public function blockInfolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema($this->childComponents);
    }

    public function render()
    {
        $i = new \Filament\Infolists\Infolist($this);
        $i->name('PageNavigationBlock');

        return new HtmlString($this->blockInfolist($i)->render());
    }
}

And usage with;

                    PageNavigationBlock::make()
                        ->schema([
                            \Filament\...\Infolists\...Entry::make()
                                ->label(false)
                        ])
                        ->group('More')

[Thiktak]

Hello,

Idéa about the Filament objects is definitively possible! Now badge colors, and the future sub-group if they implement it (discussion in progress). But here I loose my custom objects (need to re-think about it, maybe via a footer hook zone). But I had to duplicate and change some logic in the sidebar & topbar of filament (will maybe PR it).

with top navigation in bonus:

and a bonus :)

With standard objects:

Not tested in RTL Need lot of fixes (rounding, spacing, padding, etc ...)

I will push a branch with it later this week, if you want to check.

[aymanalhattami]

Great @Thiktak

I'll check every change as soon as I can.

If the idea seems good for you I can PR this version or separately, but I think some ideas could be reviewed.

Yes make PR separately, I can review and provide feedback on the proposed version or any separate ideas you have. I'm open to discussing and considering different possibilities. Please feel free to share the details or any additional information you have

I will push a branch with it later this week, if you want to check.

Ok or make PR

[Thiktak]

Hello,

https://github.com/Thiktak/filament-page-with-sidebar/tree/vFilament

This draft version is using Filament object, and retro-compatible. I had to overwrite the sidebar & topbar of filament as they used filament() global configuration.

[aymanalhattami]

Dark mode issue has been fixed and set group for items also now supported in v2.1.1

Ideas 2, 3 and 4 will be checked soon

[KumarSubham101201]

Hello,

https://github.com/Thiktak/filament-page-with-sidebar/tree/vFilament

This draft version is using Filament object, and retro-compatible. I had to overwrite the sidebar & topbar of filament as they used filament() global configuration.

How can i add the subsidebar on top?

[aymanalhattami]

Topbar supported in version 2.4.0