Filament•11mo ago

How to override views components in filament

I'm wanting to override a filament component that is in the Filament Vendor. Does anyone indicate any material, or have you done, could you give a help? The component is in the following directory, I want to edit, I tried several things but I couldn't

@props([
    'navigation',
])
<!-- override this file
//vendor/filament/filament/resources/views/components/page/sub-navigation/sidebar.blade.php
-->
<ul
    wire:ignore
    {{ $attributes->class(['hidden w-72 flex-col gap-y-7 md:flex']) }}
>
    @foreach ($navigation as $navigationGroup)
        <x-filament-panels::sidebar.group
            :collapsible="$navigationGroup->isCollapsible()"
            :icon="$navigationGroup->getIcon()"
            :items="$navigationGroup->getItems()"
            :label="$navigationGroup->getLabel()"
            :sidebar-collapsible="false"
        />
    @endforeach
</ul>

@props([
    'navigation',
])
<!-- override this file
//vendor/filament/filament/resources/views/components/page/sub-navigation/sidebar.blade.php
-->
<ul
    wire:ignore
    {{ $attributes->class(['hidden w-72 flex-col gap-y-7 md:flex']) }}
>
    @foreach ($navigation as $navigationGroup)
        <x-filament-panels::sidebar.group
            :collapsible="$navigationGroup->isCollapsible()"
            :icon="$navigationGroup->getIcon()"
            :items="$navigationGroup->getItems()"
            :label="$navigationGroup->getLabel()"
            :sidebar-collapsible="false"
        />
    @endforeach
</ul>

This component is called on this page

//vendor/filament/filament/resources/views/components/page/index.blade.php

...
  <x-filament-panels::page.sub-navigation.sidebar
             :navigation="$subNavigation"
   />
...

//vendor/filament/filament/resources/views/components/page/index.blade.php

...
  <x-filament-panels::page.sub-navigation.sidebar
             :navigation="$subNavigation"
   />
...

8 Replies

awcodes•11mo ago

Overriding views is highly discouraged since it can break at any point in time with new releases. What are you trying to do? It may be possible without overriding the view.

lordjacksonOP•11mo ago

I want to diminish the width of this under-menu. In this code, I just want to change the W-72 to W-52

{{ $attributes->class(['hidden w-72 flex-col gap-y-7 md:flex']) }}

{{ $attributes->class(['hidden w-72 flex-col gap-y-7 md:flex']) }}

awcodes•11mo ago

yea, just use css to target it and change the width.

lordjacksonOP•11mo ago

But this code is in the vendor, I can't edit it, so I'm asking for help. How to do it to override it

awcodes•11mo ago

you override it using CSS. in a stylesheet you can target it and change the width.

lordjacksonOP•11mo ago

Do you have any examples, how can I do in Filament?

awcodes•11mo ago

either create a custom theme https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme or just load a css file with https://filamentphp.com/docs/3.x/support/assets#registering-css-files

Themes - Panel Builder - Filament

Assets - Core Concepts - Filament

awcodes•11mo ago

doesn't look like there's a good way to select it though possibly: (this is just basic css though, it doesn't have anything to do with Filament) 🙂

ul:has(.fi-sidebar-group) {
  width: 200px;
}

ul:has(.fi-sidebar-group) {
  width: 200px;
}

Gaming

Programming

How to override views components in filament