src/AppMobile.vue

<template>
    <div :class="['ec-doc-mobile',  'ec-doc-' + shared.docType]">
        <div class="top-bar">
            <div class="doc-type-nav">
                <a
                    :href="'option.html#title'"
                    :class="{'selected': shared.docType === 'option'}"
                >{{$t('nav.option')}}</a>
                <a
                    :href="'api.html#echarts'"
                    :class="{'selected': shared.docType === 'api'}"
                >{{$t('nav.API')}}</a>
                <a
                    :href="'tutorial.html'"
                    :class="{'selected': shared.docType === 'tutorial'}"
                >{{$t('nav.tutorial')}}</a>
                <a
                    :href="'option-gl.html'"
                    :class="{'selected': shared.docType === 'option-gl'}"
                >{{$t('nav.optionGL')}}</a>
            </div>
            <div class="doc-mobile-toolbar">
                <el-button
                    icon="el-icon-menu" class="open-nav" size="mini"
                    @click="showNav"
                ></el-button>
                <Search></Search>
            </div>
        </div>
        <el-drawer
            direction="ltr"
            size="80%"
            :visible.sync="navShown"
            :show-close="false"
        >
            <DocNav></DocNav>
        </el-drawer>
        <transition>
            <SearchResult v-if="shared.fuzzySearch"></SearchResult>
            <!-- Always create a new component if page is changed -->
            <DocContent v-else :key="pagePath"></DocContent>
            <!-- <Home v-else></Home> -->
        </transition>
        <div class="doc-breadcrumb" v-if="pagePathParts.length > 1">
            <a :key="item.link" v-for="item in pagePathParts" :href="'#' + item.link">{{item.text}}</a>
        </div>
    </div>
</template>

<script>

import DocNav from './components/DocNav.vue';
import DocContent from './components/DocContent.vue';
import Search from './components/Search.vue';
import SearchResult from './components/SearchResult.vue';
import Home from './components/Home.vue';
import {store, getPagePath} from './store';

export default {

    props: ['docType'],

    data() {
        return {
            navShown: false,
            shared: store
        };
    },

    computed: {
        pagePath() {
            return getPagePath();
        },
        pagePathParts() {
            let parts = this.pagePath.split('.');
            let items = [];
            let link = '';
            for (let i = 0; i < parts.length; i++) {
                if (!link) {
                    link += parts[i];
                }
                else {
                    link += '.' + parts[i];
                }
                items.push({
                    text: parts[i] + (i === parts.length - 1 ? '' : '.'),
                    link: link
                });
            }
            return items;
        }
    },

    methods: {
        showNav() {
            this.navShown = true;
        }
    },

    watch: {
        'shared.currentPath'(newVal) {
            this.navShown = false;
        }
    },

    components: {
        DocNav,
        DocContent,
        Search,
        SearchResult,
        Home
    }
};
</script>

<style lang="scss">

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

.ec-doc-mobile {
    // font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", STHeiti, "Microsoft Yahei", sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;

    position: relative;

    ul, ol {
        margin: 0;
        padding: 0;
    }

    a {
        color: #337ab7;
        text-decoration: none;
        margin: 0 3px;

        &:hover {
            text-decoration: underline;
        }
    }

    .top-bar {
        position: sticky;
        top: 0;
        height: 90px;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #ddd;
        z-index: 10;
    }
    .doc-type-nav {
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        margin-left: 5px;

        a {
            display: inline-block;
            line-height: 30px;
            width: 22%;
            text-align: center;
            box-sizing: border-box;
            text-decoration: none;
            color: #000;
            cursor: pointer;
            font-size: 14px;

            &.selected {
                border-top: 3px solid #B03A5B;
            }
        }
    }

    .doc-mobile-toolbar {
        display: flex;
        flex-direction: row;

        .open-nav {
            margin: 6px 5px;
        }

        .doc-search {
            flex: 1;
        }
    }

    .doc-breadcrumb {
        position: fixed;
        text-align: center;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 20px;
        border-radius: 4px;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        background: #337ab7;

        a {
            display: inline-block;
            color: #fff;
        }
    }
}

.el-drawer {
    .doc-nav {
        position: absolute;
        top: 10px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: scroll;
    }
}

</style>