nuxtjs-bootstrap-sidebar

Sidebar component for Vue apps created using the project's bootstrap-vue fork vue-bootstrap-sidebar by Juraj Kavka

: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/thiagopinto/nuxtjs-bootstrap-sidebar.git
`
`
cd nuxtjs-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
`
nuxtjs-bootstrap-sidebar
`

$3

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

- logo - slot for your top sidebar logo component
- footer- slot for footer sidebar footer component
- 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





`

!screenshot01
!screenshot02
!screenshot03
!screenshot04
!screenshot04
!screenshot04

Configuration (props)

Configuration options (props) of the BootstrapSidebar are:

- initialShow - true/false if the sidebar is initially visible or not (default: true)
- 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`