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.

Sign up for GitHub

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

Jump to bottom

Is there a sidebar component? #3324

Closed
jose-pr opened this issue May 17, 2019 · 8 comments · Fixed by #5021, OpenTMI/opentmi-default-gui#60, tghelere/CL#25, mariazevedo88/hash-generator-js#46 or CodeForBaltimore/Healthcare-Rollcall#118
Closed

Is there a sidebar component? #3324

jose-pr opened this issue May 17, 2019 · 8 comments · Fixed by #5021, OpenTMI/opentmi-default-gui#60, tghelere/CL#25, mariazevedo88/hash-generator-js#46 or CodeForBaltimore/Healthcare-Rollcall#118
Labels
Status: Answered Status: Help Wanted Type: Question

Comments

@jose-pr
Copy link

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

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

@tmorehouse
Copy link
Member

tmorehouse commented May 17, 2019 •
edited
Loading

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 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 commented May 22, 2019 •
edited
Loading

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

I'd like having a toggable sidebar too.

@Benoit1980
Copy link

Any news on this please?

@platput
Copy link

platput commented Feb 20, 2020

I would love to have this

@imakeinternet
Copy link

+1

@tmorehouse tmorehouse mentioned this issue Mar 27, 2020
Merged
31 tasks
jacobmllr95 added a commit that referenced this issue Mar 29, 2020
@tmorehouse @jacobmllr95
feat(b-sidebar): new custom component <b-sidebar> (closes #3324, #3210
a77866f 
, #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>
@tmorehouse tmorehouse mentioned this issue Mar 31, 2020
Merged
This was referenced Apr 24, 2020
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Open
@snyk-bot snyk-bot mentioned this issue May 1, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Answered Status: Help Wanted Type: Question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(b-sidebar): new custom component <b-sidebar> (closes #3324, #3210, #1702) bootstrap-vue/bootstrap-vue
[Snyk] Upgrade bootstrap-vue from 2.9.0 to 2.10.0 OpenTMI/opentmi-default-gui
[Snyk] Upgrade bootstrap-vue from 2.9.0 to 2.10.0 tghelere/CL
[Snyk] Upgrade bootstrap-vue from 2.9.0 to 2.10.0 mariazevedo88/hash-generator-js
[Snyk] Upgrade bootstrap-vue from 2.9.0 to 2.10.0 CodeForBaltimore/Healthcare-Rollcall
[Snyk] Upgrade bootstrap-vue from 2.10.0 to 2.10.1 mariazevedo88/hash-generator-js
[Snyk] Upgrade bootstrap-vue from 2.10.0 to 2.10.1 OpenTMI/opentmi-default-gui
[Snyk] Upgrade bootstrap-vue from 2.10.0 to 2.10.1 tghelere/CL
[Snyk] Upgrade bootstrap-vue from 2.10.0 to 2.11.0 CodeForBaltimore/Healthcare-Rollcall
[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.15 to 2.13.0 leonyork/cognito-oauth2-demo
9 participants
@andrevandal @jacobmllr95 @tmorehouse @imakeinternet @Benoit1980 @aventrax @platput @jose-pr @andreascai