Filament•9mo ago

How to stop the navigation sidebar from appearing right after login on mobile?

Hi my client keep complain about this issue non stop, but I can't find any panel methods to stop the navigation sidebar from appearing right after login/register on mobile for filament v3. It only happen on 1st time customer after login/register, subsequent login this did not happen it appears. But still it is a big issue to my client. As he feel he is losing customers when right after customer register/login they see this & keep blame me for it (he think they drop off after seeing this) Is this a bug in filament v3 or some method i can call to fix this? Thank you

10 Replies

Dennis Koch•9mo ago

I guess you need some custom JS overwrite the Alpine state. Not sure whether that's really possible

Marc•9mo ago

I just checked and I have the same problem, but it doesn't always happen, it only happens when you have the menu open and log out. Inspecting the menu html, I have seen that it uses localStorage to know if the menu is open or closed. You can fix it by adding the following:

FilamentAsset::register([
    Js::make('same-id')->html('<script>var win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>')
]);

FilamentAsset::register([
    Js::make('same-id')->html('<script>var win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>')
]);

pocket.racerOP•9mo ago

it also happen to people who register on the site for the 1st time may i ask what same-id should be? may i ask what should be in same-id ? thank you hi, it seem to work but whenever i composer update or deploy to my staging/production i get this error

Filament\Support\Assets\Asset::getPath(): Return value must be of type string, null returned

  at vendor/filament/support/src/Assets/Asset.php:55
     51▕     }
     52▕ 
     53▕     public function getPath(): string
     54▕     {
  ➜  55▕         return $this->path;
     56▕     }
     57▕ 
     58▕     public function isRemote(): bool
     59▕     {

      +25 vendor frames

Filament\Support\Assets\Asset::getPath(): Return value must be of type string, null returned

  at vendor/filament/support/src/Assets/Asset.php:55
     51▕     }
     52▕ 
     53▕     public function getPath(): string
     54▕     {
  ➜  55▕         return $this->path;
     56▕     }
     57▕ 
     58▕     public function isRemote(): bool
     59▕     {

      +25 vendor frames

U know what caused it? guess i have to put what is in the ->html() into a file and reference that as the 2nd argument in ::make() okay so the fix is as follow

FilamentAsset::register([
    Js::make('whatever-id', 'the-path-is-absolutely-required-otherwise-error')->html('<script>const win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>')
]);

FilamentAsset::register([
    Js::make('whatever-id', 'the-path-is-absolutely-required-otherwise-error')->html('<script>const win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>')
]);

The 2nd argument in make() is required, null or empty string will have error. when u composer update or install (during deploying). So just create an empty js file. then the script code in html(), if u put in the js file it will not work, so u will put that code inside ->html()

Marc•9mo ago

Also encountered the same problem, an alternative, which I think would work better, is to add this:

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => '<script>const win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>',
);

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => '<script>const win=window,doc=document,docElem=doc.documentElement,body=doc.getElementsByTagName("body")[0],x=win.innerWidth||docElem.clientWidth||body.clientWidth;x<1024&&localStorage.setItem("isOpen","false");</script>',
);

https://filamentphp.com/docs/3.x/support/render-hooks

Render hooks - Core Concepts - Filament

pocket.racerOP•9mo ago

if this fix could land in core that would be great

awcodes•9mo ago

What fix? The last solution is correct it is a string.

pocket.racerOP•9mo ago

if mean if the sidebar is auto closed on mobile when the page loads.

Dennis Koch•9mo ago

Sure, open a PR.

pocket.racerOP•9mo ago

which file to edit? also i think Marc should get the credit

awcodes•9mo ago

My bad. Though you were talking about the hook. Carry on. 😀

Gaming

Programming

How to stop the navigation sidebar from appearing right after login on mobile?