countly-server/frontend/express/public/javascripts/countly/vue/templates/sidebar/sidebar.html at 6a533fb52fe11ef6a81273c57d0f0e5382fa0a0d · Countly/countly-server · GitHub

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
<div class="cly-vue-sidebar bu-is-flex" data-test-id="sidebar">
    <div class="cly-vue-sidebar__menu-options bu-is-flex bu-is-flex-direction-column bu-is-align-items-center bu-is-justify-content-space-between" data-test-id="sidebar-menu-options" @mouseover="onOptionsMenuMouseOver" @mouseleave="onOptionsMenuMouseLeave">
        <ul class="bu-is-flex bu-is-flex-direction-column bu-is-flex-align-items-center bu-is-flex-justify-content-center">
            <li v-for="item in mainMenuOptions" v-if="!item.hide" v-tooltip.right="{content: item.tooltip, container: false}" :key="item.name" @click="onClick(item)" class="cly-vue-sidebar__menu-option bu-is-flex bu-is-justify-content-center bu-is-align-items-center">
                <a v-if="item.name === 'app'" :href="redirectHomePage"><div :class="['cly-icon-btn', item.icon]" data-test-id="sidebar-menuoptions-home" style="margin-bottom: 32px;"></div></a>
                <div v-else-if="item.name === 'last-queries'">
                    <cly-report-manager-dialog :disableAutoNavigationToTask="false" :disableRunningCount="true">
                        <template v-slot:trigger="scope">
                            <i :class="['cly-icon-btn', item.icon, {'cly-vue-sidebar__menu-option--selected': item.name === pseudoSelectedMenuOption}]" data-test-id="sidebar-menuoptions-reportmanager" @click="scope.showDialog"></i>
                        </template>
                    </cly-report-manager-dialog>
                </div>
                <i v-else :class="['cly-icon-btn', item.icon, {'cly-vue-sidebar__menu-option--selected': item.name === pseudoSelectedMenuOption}]" :data-test-id="`sidebar-menuoptions-${item.name}`"></i>
            </li>
        </ul>
        <ul class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-center bu-is-justify-content-center">
            <li v-for="item in otherMenuOptions"
                :key="item.name"
                @click="onClick(item)"
                :class="[{
                    'cly-vue-sidebar__menu-option-toggle': item.name === 'toggle',
                    'cly-vue-sidebar__menu-option-toggle--no-bg': item.name === 'toggle' && !showMainMenu,
                    },
                    'cly-vue-sidebar__menu-option bu-is-flex bu-is-justify-content-center bu-is-align-items-center']"
                v-tooltip.right="{content: item.tooltip, container: false}">
                <users-menu v-if="item.name === 'user'" :item="item"></users-menu>
                <language-menu v-else-if="item.name === 'language'" :item="item"></language-menu>
                <i v-else-if="item.name === 'toggle'"
                    :class="['cly-icon-btn', item.icon, {
                        'cly-vue-sidebar__menu-option-toggle--rotate-left': showMainMenu,
                        'cly-vue-sidebar__menu-option-toggle--rotate-right': !showMainMenu
                    }]" data-test-id="sidebar-menuoptions-toogleleft"></i>
                <a v-else-if="item.name === 'help-center'" :href="helpCenterLink" :target="helpCenterTarget"><i :class="['cly-icon-btn', item.icon]" data-test-id="sidebar-menu-helpcenter"></i></a>
                <a v-else-if="item.name === 'countly-guides'" @click="onClick(item)" :href="helpCenterLink" :target="helpCenterTarget"><i class="cly-io-16 cly-is cly-is-book-open" :style="guidesButtonDynamicClass" @mouseover='guidesMouseOver' @mouseleave='guidesMouseLeave' data-test-id="sidebar-menu-countlyguides"></i></a>
                <component v-else-if="item.component" :is="item.component"></component>
                <i v-else :class="['cly-icon-btn', item.icon, {'cly-vue-sidebar__menu-option--selected': item.name === pseudoSelectedMenuOption}]"></i>
            </li>
        </ul>
    </div>
    <transition name="cly-vue-sidebar__slide-transition">
        <div
            :class="[
                'cly-vue-sidebar__menu',
                {
                    'cly-vue-sidebar--floating': selectedMenuOption === 'dashboards',
                    'cly-vue-sidebar__menu--with-banner': isCommunityEdition
                }
            ]"
            data-test-id="sidebar-menu"
            v-show="showMainMenu"
            @mouseover="onMainMenuMouseOver"
            @mouseleave="onMainMenuMouseLeave"
        >
            <analytics-menu ref="analytics" v-show="visibleSidebarMenu === 'analytics'"></analytics-menu>
            <management-menu ref="management" v-show="visibleSidebarMenu === 'management'" @management-menu-ready="onManagementMenuReady"></management-menu>
            <component :ref="item.name" v-for="item in components" :is="item.component" v-show="visibleSidebarMenu === item.name" :key="item.name"></component>
            <div v-if="isCommunityEdition" class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version">
                <div class="cly-vue-sidebar__version__banner">
                    <div class="text">{{i18n('sidebar.banner.text')}}</div>
                    <el-button class="button" type="success" @click="handleButtonClick">{{i18n('sidebar.banner.upgrade-button')}}</el-button>
                </div>
            </div>
            <a v-else :href="countlySidebarVersionPath">
                <div class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version">
                    {{versionInfo}}
                </div>
            </a>
        </div>
    </transition>
</div>