Collapsible not working on sidebar

filament config has this

  ... 'sidebar' => [
            'is_collapsible_on_desktop' => true,
            'groups' => [
                'are_collapsible' => true,
            ],
            'width' => '16.6rem',
            'collapsed_width' => null,
        ], ...

  ... 'sidebar' => [
            'is_collapsible_on_desktop' => true,
            'groups' => [
                'are_collapsible' => true,
            ],
            'width' => '16.6rem',
            'collapsed_width' => null,
        ], ...

. resources/js/app.js has this

import Alpine from 'alpinejs'
import axios from 'axios'
import Echo from 'laravel-echo'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'

window.axios = axios
window.Pusher = Pusher

Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)



window.Alpine = Alpine

Alpine.start()

import Alpine from 'alpinejs'
import axios from 'axios'
import Echo from 'laravel-echo'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'

window.axios = axios
window.Pusher = Pusher

Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)



window.Alpine = Alpine

Alpine.start()

while the css counterpart has this

@import './../../vendor/filament/filament/resources/css/app.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@import './../../vendor/filament/filament/resources/css/app.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

.Ran npm build successfully but the sidebar does not really open up nor close .I would appreciate any leads. I'm using the yepsua plugin for them and i've checked it that it works as expected.Thank you.

Solution:

Okay, I can't tell where this issue is from, but your blade files look broken. So best to remove vendor/, reinstall via composer install and run artisan filament:upgrade

Jump to solution

33 Replies

Dennis Koch•16mo ago

Is your config cached? artisan config:clear?

lodekiOP•16mo ago

Tried that as well but got the same result.

Dennis Koch•16mo ago

Did you overwrite view files?

lodekiOP•16mo ago

I don't think so. Could you just elaborate what it means override the view files ? Sorry for the dumb question.

krekas•16mo ago

Have you published views and modified them?

lodekiOP•16mo ago

No i din't even publish them.

toeknee•16mo ago

What is the browser console showing

lodekiOP•16mo ago

This is the console.

Dennis Koch•16mo ago

Okay. Since I didn't see it in the screenshot I though the hamburger icon isn't there.

but the sidebar does not really open up nor close

You mean the sidebar going from icons to icon and text, right? No console errors when clicking the hamburger icon?

lodekiOP•16mo ago

Yes I mean that , and yes there are no errors when clicking on the hamburger icon.

Dennis Koch•16mo ago

I guess 'width' => '16.6rem', is the issue. I think you need a valid tailwind class.

lodekiOP•16mo ago

Weird.Previously it was in pixels and still had the same challenge .

Dennis Koch•16mo ago

I might be wrong. Not 100% sure on this one. Try removing it and/or check the value on the sidebar.

lodekiOP•16mo ago

Okay let me try them and even setting it to null so as to see if it will pick the default width. Thank you for the help. @Dennis Koch I think it's the hamburger icon that's not showing when the sidebar is collapsed on full screen. Realized that this piece of code is not really working . Any lead of what could be the issue ?

  <button
            x-cloak
            x-data="{}"
            x-bind:aria-label="$store.sidebar.isOpen ? '{{ __('filament::layout.buttons.sidebar.collapse.label') }}' : '{{ __('filament::layout.buttons.sidebar.expand.label') }}'"
            x-on:click="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
            @class([
                'filament-sidebar-open-button shrink-0 flex items-center justify-center w-10 h-10 text-primary-500 rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10',
                'lg:mr-4 rtl:lg:mr-0 rtl:lg:ml-4' => config('filament.layout.sidebar.is_collapsible_on_desktop'),
                'lg:hidden' => ! (config('filament.layout.sidebar.is_collapsible_on_desktop') && (config('filament.layout.sidebar.collapsed_width') === 0)),
            ])
        >
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
        </button>

  <button
            x-cloak
            x-data="{}"
            x-bind:aria-label="$store.sidebar.isOpen ? '{{ __('filament::layout.buttons.sidebar.collapse.label') }}' : '{{ __('filament::layout.buttons.sidebar.expand.label') }}'"
            x-on:click="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
            @class([
                'filament-sidebar-open-button shrink-0 flex items-center justify-center w-10 h-10 text-primary-500 rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10',
                'lg:mr-4 rtl:lg:mr-0 rtl:lg:ml-4' => config('filament.layout.sidebar.is_collapsible_on_desktop'),
                'lg:hidden' => ! (config('filament.layout.sidebar.is_collapsible_on_desktop') && (config('filament.layout.sidebar.collapsed_width') === 0)),
            ])
        >
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
        </button>

Dennis Koch•16mo ago

What does "not relly working" mean?

lodekiOP•16mo ago

The humburger does not show on the page when in full screen...When i minimise or move to tablet/mobile view , It shows up.

Dennis Koch•16mo ago

That's not wrong. It only shows up if the sidebar is width 0 There is another button for toggling the sidebar inside the sidebar header

lodekiOP•16mo ago

Let me check it. Seen it .Everything seems okay.I think probably i touched something that's interfering.

awcodes•16mo ago

You’re the second person to mention having sidebar issues with this plugin installed. I would reach out to the plug-in developer.

toeknee•16mo ago

What plugin is it?

Dennis Koch•16mo ago

Yepsua Themes I think

lodekiOP•16mo ago

I tried to hide the topbar and realized that the hamburger was really appearing [ it was being covered by the topbar which spans the whole width ] as in the images below .Noticed that the main content area does not respond to the collapsing/uncollapsing of the sidebar. @Dennis Koch @Dan Harrin Tried to resolve this but i don't just get it.

Carl-bot•16mo ago

lodeki has been warned, this is their first warning.

Dennis Koch•16mo ago

Looks like your sidebar width isn't working properly

lodekiOP•16mo ago

I created a sample filament app and compared the view source code for both the apps. This is what i noticed as the difference in the source files.For the app with the error .

   :root {
            --sidebar-width: {
                    {           config('filament.layout.sidebar.width') ?? '20rem'
                }}  ;
            --collapsed-sidebar-width: {
                    {
                    config('filament.layout.sidebar.collapsed_width') ?? '5.4rem'
                }};
        }

   :root {
            --sidebar-width: {
                    {           config('filament.layout.sidebar.width') ?? '20rem'
                }}  ;
            --collapsed-sidebar-width: {
                    {
                    config('filament.layout.sidebar.collapsed_width') ?? '5.4rem'
                }};
        }

and for the new sample app

  :root {
                --sidebar-width: 100px;
                --collapsed-sidebar-width: 5.4rem;
            }

  :root {
                --sidebar-width: 100px;
                --collapsed-sidebar-width: 5.4rem;
            }

. Both config files have 100px as the sidebar width . Could this be related to the error?

Dennis Koch•16mo ago

You mean source files or source code in the browser? The first one still contains Blade tags

lodekiOP•16mo ago

Did a quick hosting on cpanel for both apps then checked the view page source in the browser.

Dennis Koch•16mo ago

The issue with the first one is the whitespace between first and second { before config. It looks like a CSS formatter kicked in and broke your code?

lodekiOP•16mo ago

I'm using Prettier.

Dennis Koch•16mo ago

Are you applying prettier to .blade.php files in vendor? 🤔

lodekiOP•16mo ago

I don't this so , reason being I didn't make any modification after installing the plugin.

Solution

Dennis Koch•16mo ago

Okay, I can't tell where this issue is from, but your blade files look broken. So best to remove vendor/, reinstall via composer install and run artisan filament:upgrade

lodekiOP•16mo ago

Okay thank you. Thank you so much . Your steps resolved the issue.

Gaming

Programming

Collapsible not working on sidebar