App.vue 4.05 KB
Newer Older
1
2
<template>
    <div id="app">
3
        <Navbar/>
gj4210's avatar
gj4210 committed
4
        <div id="wrapper" :class="show_sidebar ? 'squished' : null">
5
6
7
8
            <div id="page-content-wrapper">
                <div class="container">
                    <b-breadcrumb :items="breadcrumbs"/>
                    <router-view/>
9
                    <Footer/>
10
11
                </div>
            </div>
12
            <b-card id="sidebar-wrapper" no-body :class="show_sidebar ? 'hide' : null">
13
                <Sidebar/>
gj4210's avatar
gj4210 committed
14
            </b-card>
15
16
17
18
19
        </div>
    </div>
</template>

<script>
20
    import LoginService from '@/api-services/login.service'
21
    import Navbar from "./components/Navbar";
22
    import Footer from "./components/Footer";
23
    import Sidebar from "./components/Sidebar";
24

25
    export default {
26
        components: {Sidebar, Footer, Navbar},
27
28
        data() {
            return {
29
                breadcrumbs: [],
gj4210's avatar
gj4210 committed
30
                show_sidebar: false
31
32
33
            }
        },
        watch: {
34
            $route() {
gj4210's avatar
gj4210 committed
35
                let m = this.$router.currentRoute.matched
36
                m = m[m.length - 1]
gj4210's avatar
gj4210 committed
37
                this.breadcrumbs = this.getBreadcrumbs(m)
38
39
40
            }
        },
        methods: {
gj4210's avatar
gj4210 committed
41
42
43
44
45
            toggleSidebar() {
              this.show_sidebar = !this.show_sidebar
            },
            getBreadcrumbs(m) {
                let res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
46
47
48
                while ((m.meta && m.meta.resolveParents) || m.parent) {
                    if (m.meta && m.meta.resolveParents) {
                        let parents = m.meta.resolveParents(this.$route.params)
49
50
                        for (let i = 0; i < parents.length; i++) {
                            if (typeof parents[i] === 'object' && 'text' in parents[i] && 'to' in parents[i]) {
51
52
53
54
55
56
57
                                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]})
                        }
58
59
                    } else {
                        m = m.parent
60
                        res.unshift({text: m.meta.resolveName(this.$route.params), to: m.path})
61
62
                    }
                }
63
                return res
64
65
66
67
68
            },
            logout() {
                LoginService.logout(this.$store.state.token.pk)
                this.$store.commit('logout')
                this.$router.push('/login')
69
            }
gj4210's avatar
gj4210 committed
70
71
72
        },
        mounted() {
            window.console.log('%c ', 'font-size:0px; padding: 200px; background:url(https://i.giphy.com/media/7lsw8RenVcjCM/giphy.webp) no-repeat; background-position: center; background-size: contain;');
73
74
75
        }
    }
</script>
gj4210's avatar
gj4210 committed
76
77
78
79
80
81
82
83

<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';

gj4210's avatar
gj4210 committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    $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;
        }
gj4210's avatar
gj4210 committed
110
111
    }

gj4210's avatar
gj4210 committed
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
    @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;
        }
gj4210's avatar
gj4210 committed
127
128
    }
</style>