App.vue

<template>
    <div id="app">
        <Navbar/>
        <div id="wrapper" :class="$store.state.show_sidebar ? 'squished' : null">
            <div id="page-content-wrapper">
                <div class="container">
                    <b-breadcrumb :items="breadcrumbs"/>
                    <router-view v-bind:key="$store.state.reload_count"/>
                    <Footer/>
                </div>
            </div>
            <b-card id="sidebar-wrapper" no-body :class="$store.state.show_sidebar ? 'hide' : null">
                <Sidebar/>
            </b-card>
        </div>
    </div>
</template>

<script>
    import Navbar from "./components/Navbar";
    import Footer from "./components/Footer";
    import Sidebar from "./components/Sidebar";

    export default {
        components: {Sidebar, Footer, Navbar},
        data() {
            return {
                breadcrumbs: []
            }
        },
        watch: {
            $route() {
                let m = this.$router.currentRoute.matched
                m = m[m.length - 1]
                this.breadcrumbs = this.getBreadcrumbs(m)
            }
        },
        methods: {
            getBreadcrumbs(m) {
                let res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
                while ((m.meta && m.meta.resolveParents) || m.parent) {
                    if (m.meta && m.meta.resolveParents) {
                        let parents = m.meta.resolveParents(this.$route.params)
                        for (let i = 0; i < parents.length; i++) {
                            if (typeof parents[i] === 'object' && 'text' in parents[i] && 'to' in parents[i]) {
                                res.unshift(parents[i])
                                continue
                            }
                            m = this.$router.resolve(parents[i]).resolved.matched
                            m = m[m.length - 1]
                            res.unshift({text: m.meta.resolveName(this.$route.params), to: parents[i]})
                        }
                    } else {
                        m = m.parent
                        res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
                    }
                }
                return res
            },
        },
        mounted() {
            window.console.log('%c ', `font-size:0px; padding: 200px; background:url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/important.webp) no-repeat; background-position: center; background-size: contain;`);
        }
    }
</script>

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
    @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
    @import 'assets/css/net-suite.css';
    @import 'assets/css/net-suite-devel.css';
    @import 'assets/css/net-suite-test.css';

    $sidebar-width: 380px;

    @media screen and (min-width: 981px) {
        #wrapper {
            transition: padding-right .5s;
        }

        #wrapper.squished {
            padding-right: $sidebar-width;
        }

        #sidebar-wrapper {
            height: 100%;
            width: $sidebar-width;
            position: fixed;
            z-index: 1;
            top: 0;
            right: -$sidebar-width;
            transition: right .5s;
            padding-top: 50px;
            background: #F7F7F7;
        }

        #sidebar-wrapper.hide {
            right: 0px;
        }
    }

    @media screen and (max-width: 980px) {
        #sidebar-wrapper {
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 999;
            top: -100%;
            transition: top .5s;
            padding-top: 50px;
            background: #F7F7F7;
        }

        #sidebar-wrapper.hide {
            top: 0;
        }
    }
</style>