DashboardPanel breakpoint prop not working

[captnsandbar]

I’m having trouble getting the dashboard panel to collapse and turn into a slider properly. I see that there is a prop called breakpoint that lists the sizes for the breakpoint. Problem is that no matter what I set for the breakpoint it doesn’t work. It always collapses at lg and I want it to collapse at xl so that phones and tablets look the same. On iPad pro’s the left sidebar panel doesn’t collapse and everything is squished.

if I set :ui and then the collapsible and slideover settings I can hide it properly. But the navbar doesn’t show an icon to open the slideover until the screen reaches the proper size.

very frustrating.

[benjamincanac]

The breakpoint prop is only there to be passed to the useBreakpoint composable. To change when the burger menu is displayed you need to override the classes on UDashboardNavbarToggle which is present in the toggle slot of the DashboardNavbar component.

I agree this is not an optimal solution, I'll try to come up with a better solution in the next major of @nuxt/ui-pro!

[aligzl]

yea i am having the same problem.
What about this?
Copy everything from DashboardNavbar & UDashboardNavbarToggle components and make new local components with own configs from them, will they work in production build?

Thanks

[benkissi]

The breakpoint prop is only there to be passed to the useBreakpoint composable. To change when the burger menu is displayed you need to override the classes on UDashboardNavbarToggle which is present in the toggle slot of the DashboardNavbar component.

I agree this is not an optimal solution, I'll try to come up with a better solution in the next major of @nuxt/ui-pro!

In DashboardPanel.vue component there is a usage of

const smallerThanLg = breakpoints.smaller(props.breakpoint)

But I will want to make the mobile behaviour the default behaviour even on large screens