:bookmark_tabs: vue-bootstrap-sidebar :bookmark_tabs:

vue-bootstrap-sidebar is a Vue sidebar menu component, build using bootstrap-vue.

> Be sure to check out the Sidebar component in BootstrapVue firtst. My implementation is older, much simpler, but still in active development.

Preview

For the preview just clone this repository and run dev server.
``
git clone https://github.com/JurajKavka/vue-bootstrap-sidebar.git
`
`
cd vue-bootstrap-sidebar
`
`
npm install
`
`
npm run serve
`

Installation & integration to Vue app

> NOTE: I assume, that You are already building Vue application with bootstrap. If not, You will need to install and configure bootstrap-vue.

> NOTE: If You want to use Font Awesome icons, be sure that you have installed and configured vue-fontawesome.

$3


You can use npm
`
npm install vue-bootstrap-sidebar
`
or yarn
`
yarn add vue-bootstrap-sidebar
`

$3

BootstrapSidebar component is a wrapper for a whole page with two named slots:

- navbar - slot for your top navbar component
- content - slot for the entire content of your page

It is up to You, how Your top navbar component and content looks like. As we are using bootstrap, it is good if a whole webpage follows bootstrap patterns.

Except that, styles needs to be imported.

`

`

So, Your main app component should look like on this example:

`html


`

Configuration (props)

Configuration options (props) of the BootstrapSidebar are:

- initialShow - true/false if the sidebar is initially visible or not (default: true)
- header - header for the sidebar. You can also use html tags like h3, strong, etc.
- links - array of menu items.
- href propery is rendered with router-link.
- children property is rendered as dropdown with defined child.
- faIcon renders Font Awesome icon, lef to the menu item. For this feature, You need to install vue-fontawesome. You can provide icon as array e.g. ['fas', 'user'] or as string e.g.'user'.
- theme - custom scss theme (default: default-theme).

TODOs

- write tests

Notes

- npm package is created with vue-sfc-rollup`