Vue.js Navigation Bar and Sidebar (Responsive)

Installation:

npm install vuejs-adminpanel --save
npm install bootstrap --save

How to use:

<script>
    import AdminPanel from "vuejs-adminpanel";

    export default {
        components:{
            AdminPanel
        }
    }
</script>

<style lang="scss">

    @import "~bootstrap";

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        font-family: sans-serif;
        background-color: #f1f1f1;
    }

</style>

Example:

<template>
    <admin-panel
            navbar-bg-color="#30475e"
            sidebar-bg-color="#fafafa"
            hamburger-btn-color="#f2f2f2"
    >
        <!-- Navbar -->
        <div slot="navbar">
            <!-- Navbar Element Add-->
            <span class="text-white">Navbar</span>
        </div>
        <!-- Navbar END -->

        <!-- Sidebar -->
        <div slot="sidebar" class="v-sidebar">
            <!-- Sidebar Element Add-->
            <h2>Sidebar</h2>
        </div>
        <!-- Sidebar END -->

        <!-- Content -->
        <div slot="content">
            <!-- Content Element Add-->
            <h3>Content</h3>
        </div>
        <!-- Content END -->


    </admin-panel>
</template>

<script>
    import AdminPanel from "./components/AdminPanel";

    export default {
        components:{
            AdminPanel
        }
    }
</script>

<style lang="scss">

    @import "~bootstrap";

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        font-family: sans-serif;
        background-color: #f1f1f1;
    }

    .v-sidebar{
        margin-top: 20px;
        text-align: center;
    }

</style>

Author

Mustafa ER | [email protected]

License

MIT