Vue Sidenavbar

Really simple animated navigation sidebar with only icons or with icons and text, done with Vuejs.

Demo

Codesandbox demo - https://codesandbox.io/embed/vue-sidenavbar-demo-3pjye?hidenavigation=1&theme=dark

To run demo locally, run:

npm i
npm run demo

Then open localhost:8080

Installation

npm install vue-sidenavbar --save

Usage

Plugin install:

import Vue from "vue";
import VueSidenavbar from "vue-sidenavbar";

Vue.use(VueSidenavbar);

OR just import the components where you want to use them:

import { VueSidenavbar, VueSidenavbarItem } from "vue-sidenavbar";

export default {
  components: {
    VueSidenavbar,
    VueSidenavbarItem
  }
};

In your template:

<template>
  <VueSidenavbar>
    <VueSidenavbarItem label="HOME" icon="fas fa-home" to="/home" />
    <VueSidenavbarItem
      label="PROFILE"
      icon="fas fa-address-card"
      to="/profile"
    />
    <VueSidenavbarItem
      label="LOGOUT"
      icon="fas fa-sign-out-alt"
      tag="a"
      @click="someFunction"
    />
  </VueSidenavbar>
</template>

Props

VueSidenavbar: no props.

VueSidenavbarItem:

| name | type | default | description | | ----- | ------ | ----------- | ------------------------------------------------------------------- | | tag | String | router-link | The template tag of the nav item (inherits all other attributes) | | label | String | | The text under the icon (not required) | | icon | String | | The name of the icon (goes into class attribute of i)(not required) |

Slots

VueSidenavbar:

| name | description | | ------- | ---------------- | | default | Componet content |

usage:

<VueSidenavbar>
    <VueSidenavbarItem label="HOME" icon="fas fa-home" tag="a" />
</VueSidenavbar>

VueSidenavbar:

| name | description | | ------- | ----------------------------------------------------------------------------------------------------- | | default | Use only if you want to create custom nav item, else it has default content, that work with the props |

usage:

<VueSidenavbar>
    <VueSidenavbarItem label="HOME" icon="fas fa-home" to="/home"/>
    <VueSidenavbarItem>
      <a href="/home" class="sidenav__link"><i class="fas fa-home"></i><span>Home</span></a>
    </VueSidenavbarItem>
</VueSidenavbar>

Colour variables

You can easily configure the sidenav's colours by using the css variables below:

:root {
  --sidebaritem-bgcolor: #461220;
  --sidebaritem-hover-bgcolor: #8c2f39;
  --burger-color: gray;
  --burger-bgcolor: red;
  --burger-hover-bgcolor: pink;
}

Author

© Igor Pavloski

Design

© Stacked Template

License