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-alert show variant="warning">
            <b-row>
              <b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
                <font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
              </b-col>
              <b-col style="margin-top: auto; margin-bottom: auto">
                      <span><b> WIP!</b>
                        Diese Anwendung befindet sich in aktiver Entwicklung. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
              </b-col>
            </b-row>
          </b-alert>
          <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) {
      const 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) {
          const 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>