vue-sidenavbar

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