mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-05 19:15:03 +00:00
87 lines
3 KiB
Vue
87 lines
3 KiB
Vue
<template>
|
|
<nav class="navbar navbar-shadow navbar-expand-lg navbar-light bg-light px-2 mb-2">
|
|
<span class="me-1 text-nowrap" style="font-size: 1.1rem;">
|
|
<i :class="main_title.icon"></i>
|
|
<a v-if="main_title.href" :href="main_title.href" :title="main_title.title"> {{main_title.label}}</a>
|
|
<span v-else :title="main_title.title"> {{main_title.label}}</span>
|
|
<template v-for="item in secondary_title_list"> /
|
|
<a v-if="item.href" :class="item.class" :href="item.href" :title="item.title">
|
|
{{item.label}}
|
|
<i v-if="item.icon" :class="item.icon"></i>
|
|
</a>
|
|
<span v-else :title="item.title">{{item.label}}</span>
|
|
</template>
|
|
</span>
|
|
<span class="text-muted ms-1 d-none d-lg-inline d-md-none">|</span>
|
|
<button class="navbar-toggler" type="button">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse scroll-x" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<template v-for="item in items_table">
|
|
<template v-if="item.active">
|
|
<li v-if="item.active" @click="this.$emit('click_item', item)" class="nav-item nav-link active" :class="item.class">
|
|
<span v-if="item.badge_num > 0" class="badge rounded-pill bg-dark" style="float:right;margin-bottom:-10px;">{{ item.badge_num }}</span>
|
|
<b><i :class="item.icon"></i>
|
|
{{item.label}}
|
|
</b>
|
|
</li>
|
|
<li v-else @click="this.$emit('click_item', item)" class="nav-item nav-link" :class="item.class">
|
|
<span v-if="item.badge_num > 0" class="badge rounded-pill bg-dark" style="float:right;margin-bottom:-10px;">{{ item.badge_num }}</span>
|
|
<b><i :class="item.icon"></i>
|
|
{{item.label}}
|
|
</b>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<a @click="this.$emit('click_item', item)" href="#" class="nav-item nav-link" :class="item.class">
|
|
<span v-if="item.badge_num > 0" class="badge rounded-pill bg-dark" style="float:right;margin-bottom:-10px;">{{ item.badge_num }}</span>
|
|
<i :class="item.icon"></i>
|
|
{{item.label}}
|
|
</a>
|
|
</template>
|
|
|
|
|
|
</template>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
<a href="javascript:history.back()" class="nav-item nav-link text-muted">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<a target="_newtab" :href="help_link" class="nav-item nav-link text-muted">
|
|
<i class="fas fa-question-circle"></i>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue';
|
|
export default defineComponent({
|
|
components: {
|
|
},
|
|
props: {
|
|
id: String,
|
|
main_title: Object,
|
|
secondary_title_list: Array,
|
|
help_link: String,
|
|
items_table: Array,
|
|
},
|
|
emits: ["click_item"],
|
|
/** This method is the first method of the component called, it's called before html template creation. */
|
|
created() {
|
|
},
|
|
data() {
|
|
return {
|
|
//i18n: (t) => i18n(t),
|
|
};
|
|
},
|
|
/** This method is the first method called after html template creation. */
|
|
mounted() {
|
|
ntopng_sync.ready(this.$props["id"]);
|
|
},
|
|
methods: {
|
|
},
|
|
});
|
|
</script>
|