search

bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
https://bootstrap-vue.org
MIT License
14.51k stars 1.88k forks source link

Feature Request: Make sidebar partially minimizable and swipeable #5095

Open TitanFighter opened 4 years ago

TitanFighter commented 4 years ago

Is your feature request related to a problem? Please describe...

  1. I need to use sidebars as an additional menu and as a search with different filters. When user opens site, sidebars are not shown. It would be sweet if sidebars could be shown partially/minimized. Partially here means that sidebar either may show some icons (if width is big :) or simply be blank, so just line of border is visible (if width is small, so it can be useful on mobiles).

  2. Additionally would be sweet if sidebar could be swipeable on mobile (or on desktop also?), so user seeing just a small part of, for example left sidebar, could understand that there is some content on the left and can a) swipe to the right to open it fully, and b) when opened, swipe to the left to minimize it.

  3. Also, if it is not so difficult, maybe for somebody it would be useful to have sidebar next to the main block of site, instead of over it, ie when left sidebar is opening, main block is sliding to the right (like shown here).

Describe the solution you'd like.

Add 3 dynamic props:

  1. For example minimized-width="10"[px] (where 0 is the current implementation, ie fully hidden when minimized).
  2. swipeable, which allows to turn on support of swiping on mobile (or on desktop also, as some image libraries do?).
  3. slider? to slide content of site when sidebar is opening.
tmorehouse commented 4 years ago

The content sliding requires that the body (or the page content wrapper) be wrapped with the sidebar in it... so a bot more markup.... or alter the page body margin to match that of the sidebar... so it would require a bit or re-work.

There have been discussions on making a new slot for sidebar, which would be an exposed column that shows when the sidebar is minimized (say 80px or so by default). We are looking into this as an option, but will slightly alter the current structure of sidebar (the rendered divs will need one extra wrapper)

Swipable would require the exposed column feature to be implemented first.

TitanFighter commented 4 years ago

So, there should be three stages of minimization:

  1. Hidden (current implementation).

  2. Super minimized, useful on mobiles (left blue line/bar should be swipable): image

  3. Partially minimized: image

mariusa commented 4 years ago

I guess it's implied by screenshots above, but another important property to add is for sidebar content to push page content, instead of overlaying over it.

Example of sidebar: https://coreui.io/demo/3.1.0/#main.html

Note how it's on by default, but can be completely hidden by menu icon at top-left. It can also be minimized, as in the example above.

ux-engineer commented 4 years ago

These additional settings for the Sidebar component are much awaited here!

To be able to minimize the sidebar to narrow state instead of hidden, and to be able to use swipe gestures, as well as being able to animate width transitions for the sidebar and a layout container next to it...

marcianos commented 3 years ago

Is there any update about the sidebar component and the possibility to partially minimize it?

ux-engineer commented 3 years ago

@marcianos Bootstrap 5 would have it. But at the moment this library's development has been stalled and many are waiting for information from the package maintainers on the future's milestones and development effort.