F
Filament•4d ago
Sjoerd24

Hiding sidebar by default for tablet users

So it is possible to make the sidebar collapsible like this: ->sidebarCollapsibleOnDesktop(). I would like to collaps by default it for some users, is that possible? (i have certain "tablet" users and for them i want to keep the layout as clean as possible, but it should still be possible to access the menu if needed) I can filter for these users pretty easily (they have a userrole "node") but is there a way to set the default value for the hiding or showing of this sidebar? Also small second question, if you link from within a modal to a resource, if users click on this link they get a warning that they are leaving the page. Is it possibly to not get this error? Maybe load the resource page through livewire or something?
3 Replies
skeemer
skeemer•4d ago
It looks like the open state is completely client side. It uses $store.sidebar.isOpen so you could possibly add an x-init="$store.sidebar.close()" in a view. If they rotate, that would possibly reopen. The resize check is set in a const to 1024px.
Dennis Koch
Dennis Koch•3d ago
And that's loaded from localStorage, so you could try using some JS to set the state before it's used by Alpine
LeandroFerreira
LeandroFerreira•3d ago
I think you can register a script data Create a custom middleware and add something like this 
FilamentAsset::registerScriptData([
    'currentUser' => [
        'device' => 'tablet'
    ],
]);
FilamentAsset::registerScriptData([
    'currentUser' => [
        'device' => 'tablet'
    ],
]);
Add this middleware in your panel provider Create a custom js in resources/js/custom.js 
document.addEventListener('alpine:initialized', () => {
    if (window.filamentData.currentUser.device === 'tablet') {
        const sidebar = Alpine.store('sidebar');
        sidebar.close();
    }
});
document.addEventListener('alpine:initialized', () => {
    if (window.filamentData.currentUser.device === 'tablet') {
        const sidebar = Alpine.store('sidebar');
        sidebar.close();
    }
});
Register the script in your appserviceprovider 
FilamentAsset::register([
    Js::make('custom-script', __DIR__ . '/../../resources/js/custom.js'),
]);
FilamentAsset::register([
    Js::make('custom-script', __DIR__ . '/../../resources/js/custom.js'),
]);
don't forget to run php artisan filament:assets to copy js file into /public dir
Registering assets - Advanced - Filament

Did you find this page helpful?