Nuclear Pumpkin Mayhem

    vue-sidenavbar

    1.0.4 • Public • Published

    Vue Sidenavbar npm version

    GitHub license NPM bundle size code style: prettier

    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

    GitHub license

    Install

    npm i vue-sidenavbar

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    36.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • pavloskii