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}` + ' shadow'">
        <!-- 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"/>
        </b-navbar-toggle>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <b-collapse is-nav id="navbarNavDropdown" ref="navdropdown">
            <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-form inline @submit="searchAction" class="mr-2">
                    <transition name="slide">
                        <b-form-input v-if="show_search || ($refs.navdropdown && $refs.navdropdown.show)" ref="search"
                                      size="sm" placeholder="Suche"
                                      v-model="search_input" class="mr-2 search"/>
                    </transition>
                    <b-button class="search-button" size="sm" @click="searchAction"
                              :variant="search_input === '' ? 'secondary' : 'success'">
                        <font-awesome-icon :icon="['fas','search']"/>
                    </b-button>
                    <div class="search-cover-wrapper">
                        <div class="search-cover"/>
                    </div>
                </b-form>
                <b-nav-item :active="$store.state.show_sidebar"
                            @click="$store.commit('showSidebar', !$store.state.show_sidebar)">
                    <font-awesome-icon :icon="['fas', 'tasks']"/>
                    Geplante Aktionen
                    <b-badge variant="primary">{{$store.state.ta_list ? $store.state.ta_list.length : 0}}</b-badge>
                </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']"/>
                        <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="['fas', 'code']"/>
                            API-Tokens
                        </b-dropdown-item>
                        <b-dropdown-divider/>
                        <b-dropdown-item @click="logout">
                            <font-awesome-icon :icon="['fas', 'sign-out-alt']"/>
                            Abmelden
                        </b-dropdown-item>
                    </template>
                </b-nav-item-dropdown>
                <b-nav-item v-else to="/login">
                    <font-awesome-icon :icon="['fas', 'sign-in-alt']"/>
                    <span>Anmelden</span>
                </b-nav-item>
            </b-navbar-nav>
        </b-collapse><!-- /.navbar-collapse -->
    </b-navbar>
</template>

<script>
    import LoginService from '@/api-services/login.service'

    export default {
        name: "Navbar",
        data() {
            return {
                show_search: false,
                search_input: ''
            }
        },
        methods: {
            async logout() {
                await LoginService.logout(this.$store.state.token.pk)
                this.$store.commit('logout')
                await this.$router.push('/login')
            },
            searchAction(e) {
                e.preventDefault()
                if (this.search_input === '') {
                    this.show_search = !this.show_search
                    if (this.show_search) {
                        this.$nextTick(() => {
                            this.$refs.search.focus()
                        })
                    }
                } else {
                    // TODO: actually search stuff
                    window.console.log('Search: ' + this.search_input)
                    this.search_input = ''
                }
            }
        }
    }
</script>

<style scoped>
    .slide-enter-active,
    .slide-leave-active {
        transition: transform 250ms;
        z-index: -10;
    }

    .slide-enter,
    .slide-leave-to {
        transform: translateX(120%);
    }

    .search-cover-wrapper {
        position: relative;
        width: 0;
        height: 0;
    }

    .search-cover {
        z-index: -1;
        position: absolute;
        left: -30px;
        top: -25px;
        width: 200px;
        height: 50px;
        background: #343A40;
    }

    .search-button {
        z-index: 1;
    }
</style>