custom sidebar width for each panel about leaflet-sidebar-v2 HOT 5 CLOSED

What do you mean by dynamic?

In general you need to override the width and max-width CSS properties on the .leaflet-sidebar selector.
As the sidebar style is responsive, you'd need to override it for multiple media queries.

This is the default style you'd need to override:

@media (min-width: 768px) and (max-width: 991px) {
    .leaflet-sidebar {
      width: 305px;
      max-width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-sidebar {
      width: 390px;
      max-width: 390px; } }
@media (min-width: 1200px) {
    .leaflet-sidebar {
      width: 460px;
      max-width: 460px; } }

from leaflet-sidebar-v2.

If you want to change the width when a tab was clicked, you can register an event and adjust the sidebar style in JS:

sidebar.on('content', function (e) {
  const sidebarElement = document.querySelector('.leaflet-sidebar') 
  switch (e.id) {
    case 'smalltab': // your tab IDs
      sidebarElement.style.width = '200px'
      sidebarElement.style.maxWidth = '200px'
      break
    case 'largetab':
      sidebarElement.style.width = '600px'
      sidebarElement.style.maxWidth = '600px'
      break
  }
})

This does not respect responsiveness however.

from leaflet-sidebar-v2.

Hey,

when I do this, the tabs won't close anymore. Any idea how to solve that?

from leaflet-sidebar-v2.

@Janphr
With the approach outlined above, you need to remove the style again on the closing event.
Maybe a better approach would be to write CSS classes for each tab with the desired width, and toggle the classes in the content event. The following shows what I mean but is untested

.leaflet-sidebar:not(.collapsed).mypanel {
  width: 600px;
  max-width: 600px;
}

sidebar.on('content', e => {
  const sidebarElement = document.querySelector('.leaflet-sidebar')
  sidebarElement.classList.remove('all', 'the', 'panel ids', 'you', 'want', 'to', 'handle', 'here')
  sidebarElement.classList.add(e.id)
})

from leaflet-sidebar-v2.

Thanks for the quick response!
Just added:

        if (L.DomUtil.hasClass(this, 'active')) {
            let sidebar = document.querySelector('.leaflet-sidebar')
            sidebar.style.width = 40 + 'px'
            sidebar.style.maxWidth = 40 + 'px'
            this._sidebar.close();

to the onTabClick function, which works fine.

*Just no smooth transition anymore, so I'll check out your solution

from leaflet-sidebar-v2.