<style lang="sass">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
    @import '../node_modules/ionicons/dist/css/ionicons.css';
    @import '../node_modules/toastr/build/toastr.css';

    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url("data:image/gif;base64,[encoded data, 5936 characters]");
    }

    .form-control, .btn, .input-group-addon, .modal-content {
        border-radius: 0 !important;
    }

    .white-link {
        color: #ffffff;
        text-decoration: underline;
    }

    .white-link:hover {
        color: #ffffff;
        text-decoration: none;
    }

    .app {
        height: 100%;
        display: flex;
    }

    .content {
        height: 100%;
        width: 100%;
        padding-top: 5em;
    }

    .content.no-sidebar, .content.no-sidebar .container-fluid {
        padding: 0;
    }

    @media (min-width: 48em) {
        .content {
            padding-top: 1em;
            padding-left: 64px;
        }
    }
</style>
<template>
    <div class="app">
        <div class="sidebar-wrapper" v-show="user.authenticated">
            <sidebar></sidebar>
        </div>
        <div class="content" v-bind:class="{ 'no-sidebar': !user.authenticated }">
            <div class="container-fluid">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import 'bootstrap/dist/js/umd/collapse.js';
    import Sidebar from './components/sidebar';
    import auth from './services/auth';

    export default {
        data() {
            return {
                user: auth.user
            };
        },
        components: {
            Sidebar,
        }
    };
</script>
