Footer

Basic

    <mu-footer>
        <template slot="links">
            <a
                class="dark mu-footer__info-item"
                href=""
                rel="nofollow"
            >
                About
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.help"
                rel="nofollow"
            >
                Help
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.support"
                rel="nofollow"
            >
                Support
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.appManual"
                rel="nofollow"
            >
                Mobile application
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.getplugin"
                rel="nofollow"
            >
                Browser extensions
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.job"
                rel="nofollow noopener noreferrer"
            >
                Career
            </a>
            <a
                class="dark mu-footer__info-item"
                :href="link.gifts"
                rel="nofollow"
            >
                Gifts
            </a>
        </template>

        <template slot="social">
            <mu-social-channels :links="socialLinks" class-name="mu-footer__social-link"></mu-social-channels>
        </template>

        <template slot="stores">
            <mu-stores :links="storeLinks" lang="en"></mu-stores>
        </template>

        <template slot="locale">
            <mu-change-lang 
                :current-language="routerLang" 
                :all-languages="allLanguages" 
                position="bottom" 
                style-dropdown="gray" 
                v-on:changelang="changeLang"
                ></mu-change-lang>
        </template>

        <template slot="info">
            <ul class="mu-footer__info-bottom">
                <li class="mu-footer__info-bottom-item">
                    Our email
                    <a
                        class="dark"
                        :href="link.email"
                        rel="nofollow noopener noreferrer"
                    >: {{ link.email }}</a>
                </li>
                <li class="mu-footer__info-bottom-item">
                    <a
                        class="dark"
                        :href="link.rules"
                        rel="nofollow"
                    >
                        Rules
                    </a>
                </li>
                <li class="mu-footer__info-bottom-item">
                    <a
                        class="dark"
                        :href="link.privacy"
                        rel="nofollow"
                    >
                        Terms
                    </a>
                </li>
                <li class="mu-footer__info-bottom-item">&copy;{{ currentYear }} chimu-developers</li>
            </ul>
        </template>
    </mu-footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
    export default {
        data() {
            return {
                currentYear: '2077',
                socialLinks: {
                    "facebook": {
                        "link": "https://www.facebook.com/",
                        "icon": "facebook-f"
                    },
                    "instagram": {
                        "link": "https://www.instagram.com/",
                        "icon": "instagram"
                    },
                    "youtube": {
                        "link": "https://www.youtube.com/",
                        "icon": "youtube"
                    },
                    "telegram": {
                        "link": "https://telegram.me/",
                        "icon": "telegram-plane"
                    },
                    "vk": {
                        "link": "https://vk.com/",
                        "icon": "vk"
                    }
                },
                storeLinks: {
                    telegram: {
                        name: 'telegram_bot',
                        link: 'https://telegram.me/',
                    },
                    itunes: {
                        name: 'app_store',
                        link: 'https://itunes.apple.com/',
                    },
                    googlePlay: {
                        name: 'google_play',
                        link: 'https://play.google.com/',
                    },
                    yandexStore: {
                        name: 'yandex_store',
                        link: 'https://m.store.yandex.ru/',
                    },
                },
                link: {
                    mainCashback: '',
                    help: '',
                    support: '',
                    appManual: '',
                    email: 'cyberp@chimu.design',
                    getplugin: '',
                    gifts: '',
                    job: '',
                    privacy: '',
                    rules: '',
                },
                lang: 'en',
                allLanguages: ['ru', 'en', 'es'],
            };
        },
        computed: {
            routerLang() {
                return this.lang
            }
        },
        methods: {
            changeLang(lang) {
                this.lang = lang;
                console.log('Language:', lang)
            }
        },
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72