UPD: Refactored navbar into it's own component

frontend/src/App.vue

 <template>
     <div id="app">
-        <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`">
-            <!-- Brand and toggle get grouped for better mobile display -->
-            <b-navbar-brand to="/">
-                <img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
-                <span v-if="!$sysinfo.host_oper_mode.is_prod"> Instanz: {{$sysinfo.host_oper_mode.mode}}</span>
-            </b-navbar-brand>
-            <b-navbar-toggle target="navbarNavDropdown">
-                <font-awesome-icon icon="bars"></font-awesome-icon>
-            </b-navbar-toggle>
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <b-collapse is-nav id="navbarNavDropdown">
-                <b-navbar-nav>
-                    <b-nav-item v-if="$sysinfo_mods_by_name['dnsvs']" to="/dnsvs/" :active="$route.path.startsWith('/dnsvs/')">DNSVS</b-nav-item>
-                    <b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases']" to="/dhcp-leases/" :active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases</b-nav-item>
-                    <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/" target="_blank">NATVS+</b-nav-item>
-                    <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/" target="_blank">NETDOC</b-nav-item>
-                </b-navbar-nav>
-                <b-navbar-nav class="ml-auto">
-                    <b-nav-form>
-                        <div class="input-group mr-sm-2">
-
-                            <div id="scope_filter_display" class="input-group-prepend">
-                                <span class="input-group-text">DNSVS</span>
-                            </div>
-                            <input class="form-control" type="search" id="nav-search" name="search"
-                                   placeholder="Suchbegriff"
-                                   aria-label="Search">
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
-                            </div>
-                        </div>
-                    </b-nav-form>
-                    <b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item>
-                    <b-nav-item>
-                            <i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span
-                                class="badge badge-pill badge-success"
-                                id="trans_count">0</span>
-                    </b-nav-item>
-                    <b-nav-item-dropdown v-if="$store.state.user" right :toggle-class="$route.path.startsWith('/user/')?'active':''">
-                        <template slot="button-content">
-                            <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
-                            <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
-                        </template>
-                        <template v-if="$store.state.user">
-                            <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'"><font-awesome-icon icon="code"></font-awesome-icon> API-Tokens</b-dropdown-item>
-                            <b-dropdown-divider></b-dropdown-divider>
-                            <b-dropdown-item @click="logout()">Abmelden</b-dropdown-item>
-                        </template>
-                    </b-nav-item-dropdown>
-                    <b-nav-item v-else>
-                            <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
-                            <span> Anmelden</span>
-                    </b-nav-item>
-
-                </b-navbar-nav>
-            </b-collapse><!-- /.navbar-collapse -->
-        </b-navbar>
+        <Navbar/>
         <div id="wrapper">
             <div id="page-content-wrapper">
                 <div class="container">
@@ -100,8 +44,10 @@
 
 <script>
     import LoginService from '@/api-services/login.service'
+    import Navbar from "./components/Navbar";
 
     export default {
+        components: {Navbar},
         data() {
             return {
                 breadcrumbs: [],

frontend/src/components/Navbar.vue

+<template>
+    <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <b-navbar-brand to="/">
+            <img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
+            <span v-if="!$sysinfo.host_oper_mode.is_prod"> Instanz: {{$sysinfo.host_oper_mode.mode}}</span>
+        </b-navbar-brand>
+        <b-navbar-toggle target="navbarNavDropdown">
+            <font-awesome-icon icon="bars"></font-awesome-icon>
+        </b-navbar-toggle>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <b-collapse is-nav id="navbarNavDropdown">
+            <b-navbar-nav>
+                <b-nav-item v-if="$sysinfo_mods_by_name['dnsvs']" to="/dnsvs/" :active="$route.path.startsWith('/dnsvs/')">DNSVS</b-nav-item>
+                <b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases']" to="/dhcp-leases/" :active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases</b-nav-item>
+                <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/" target="_blank">NATVS+</b-nav-item>
+                <b-nav-item href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/" target="_blank">NETDOC</b-nav-item>
+            </b-navbar-nav>
+            <b-navbar-nav class="ml-auto">
+                <b-nav-form>
+                    <div class="input-group mr-sm-2">
+
+                        <div id="scope_filter_display" class="input-group-prepend">
+                            <span class="input-group-text">DNSVS</span>
+                        </div>
+                        <input class="form-control" type="search" id="nav-search" name="search"
+                               placeholder="Suchbegriff"
+                               aria-label="Search">
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
+                        </div>
+                    </div>
+                </b-nav-form>
+                <b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item>
+                <b-nav-item>
+                    <i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span
+                        class="badge badge-pill badge-success"
+                        id="trans_count">0</span>
+                </b-nav-item>
+                <b-nav-item-dropdown v-if="$store.state.user" right :toggle-class="$route.path.startsWith('/user/')?'active':''">
+                    <template slot="button-content">
+                        <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
+                        <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
+                    </template>
+                    <template v-if="$store.state.user">
+                        <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'"><font-awesome-icon icon="code"></font-awesome-icon> API-Tokens</b-dropdown-item>
+                        <b-dropdown-divider></b-dropdown-divider>
+                        <b-dropdown-item @click="logout()">Abmelden</b-dropdown-item>
+                    </template>
+                </b-nav-item-dropdown>
+                <b-nav-item v-else>
+                    <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
+                    <span> Anmelden</span>
+                </b-nav-item>
+
+            </b-navbar-nav>
+        </b-collapse><!-- /.navbar-collapse -->
+    </b-navbar>
+</template>
+
+<script>
+    export default {
+        name: "Navbar"
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file