Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a sidebar component? #3324

Comments

@jose-pr
Copy link

@jose-pr jose-pr commented May 17, 2019

Is there a sidebar component or what would be the recommended way to create a side navbar? that can also show/hide?

@andrevandal
Copy link

@andrevandal andrevandal commented May 17, 2019

I think you can use list group or nav with vertical-variation.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented May 17, 2019

And then use positioning (i.e. sticky or absolute) on an outer wrapper element (i.e. a div) around the vertical b-nav, and conditionally show it (v-if, or v-show) based on some state variable.

You could get fancy and wrap the outer div in a Vue transition element (and create associated transition styles) to make the side navbar slide in/out or fade in/out.

@jose-pr
Copy link
Author

@jose-pr jose-pr commented May 17, 2019

Will look into it wanted tor recreate a sidenav like https://startbootstrap.com/previews/sb-admin-2/ or https://keenthemes.com/keen/preview/demo1/

@andreascai
Copy link

@andreascai andreascai commented May 22, 2019

I think you can use list group or nav with vertical-variation.

How about type and variant like navbar? I'm new to this

@aventrax
Copy link

@aventrax aventrax commented Oct 23, 2019

I'd like having a toggable sidebar too.

@Benoit1980
Copy link

@Benoit1980 Benoit1980 commented Feb 2, 2020

Any news on this please?

@platoputhur
Copy link

@platoputhur platoputhur commented Feb 20, 2020

I would love to have this

@imakeinternet
Copy link

@imakeinternet imakeinternet commented Feb 28, 2020

+1

jacobmllr95 added a commit that referenced this issue Mar 29, 2020
, #1702) (#5021)

* feat(b-sidebar): new custom component `<b-sidebar>`

* Update sidebar.js

* Update sidebar.js

* Update sidebar.spec.js

* Update package.json

* Update sidebar.js

* Update sidebar.spec.js

* Update sidebar.js

* Update index.scss

* Update index.d.ts

* Update index.js

* Update index.js

* Update _sidebar.scss

* Update _sidebar.scss

* Update _sidebar.scss

* Update sidebar.js

* Update sidebar.js

* Update package.json

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update _sidebar.scss

* Update _sidebar.scss

* Update sidebar.js

* Update package.json

* Update README.md

* Update package.json

* Update package.json

* Update README.md

* Update package.json

* Update _sidebar.scss

* Update sidebar.js

* Update package.json

* Update sidebar.js

* Update package.json

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update _sidebar.scss

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update _sidebar.scss

* Update _sidebar.scss

* Update sidebar.js

* Update _sidebar.scss

* Update sidebar.js

* Update _sidebar.scss

* Update sidebar.js

* Update _sidebar.scss

* Update sidebar.js

* Update package.json

* Update README.md

* Update README.md

* Update index.js

* Update styles.scss

* Update README.md

* Update README.md

* Update sidebar.js

* Update package.json

* Update README.md

* Update sidebar.js

* Update package.json

* Update README.md

* Update README.md

* Update _sidebar.scss

* Update README.md

* Update sidebar.js

* Update package.json

* Update _variables.scss

* Update _sidebar.scss

* Update README.md

* Update sidebar.js

* Update README.md

* Update package.json

* Update README.md

* Update README.md

* Update README.md

* Update _sidebar.scss

* Update package.json

* Update README.md

* `input` => `change`

* Add global settings and markup improvements

* Update sidebar.js

* Update sidebar.js

* Update sidebar.js

* Update config-defaults.js

* Update sidebar.js

* Update _sidebar.scss

* Update sidebar.js

* Update _sidebar.scss

* Update _sidebar.scss

* Update package.json

* Update package.json

* Update README.md

* Update package.json

* Update README.md

* Update sidebar.spec.js

* Update README.md

* Update _sidebar.scss

* Update sidebar.js

* Update README.md

* Update sidebar.js

* Update package.json

* Update README.md

* Update sidebar.js

* Update README.md

* Update sidebar.js

* Update bv-tooltip.js

* Update bv-tooltip.js

* Update sidebar.spec.js

* Update sidebar.spec.js

* Update sidebar.js

* Update sidebar.spec.js

* Update sidebar.js

* Update sidebar.spec.js

* Update sidebar.spec.js

* Update sidebar.spec.js

* Update sidebar.js

* Update sidebar.spec.js

* Update sidebar.spec.js

* Update sidebar.js

* Update sidebar.spec.js

* lint

* Update sidebar.js

* Update sidebar.js

* Update sidebar.spec.js

* Update sidebar.js

* Update README.md

* Update package.json

* Update sidebar.js

* Update sidebar.spec.js

* Update README.md

* Update package.json

* Update package.json

* Update sidebar.js

* Update package.json

* Update sidebar.js

* Update README.md

* Update sidebar.spec.js

* Update config-defaults.js

* Update modal.js

* Update sidebar.spec.js

* Update sidebar.js

* Update sidebar.spec.js

* Update package.json

* Update form-timepicker.js

* Update modal.js

* Update sidebar.spec.js

* Update sidebar.spec.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment