77 lines
2.4 KiB
Vue
77 lines
2.4 KiB
Vue
<template>
|
|
<nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
|
|
<div class="container-fluid">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-toggle d-inline">
|
|
<button type="button" class="navbar-toggler">
|
|
<span class="navbar-toggler-bar bar1"></span>
|
|
<span class="navbar-toggler-bar bar2"></span>
|
|
<span class="navbar-toggler-bar bar3"></span>
|
|
</button>
|
|
</div>
|
|
<a class="navbar-brand" href="#pablo">{{routeName}}</a>
|
|
</div>
|
|
<button class="navbar-toggler" type="button"
|
|
data-toggle="collapse"
|
|
@click="toggleSidebar"
|
|
:aria-expanded="$sidebar.showSidebar"
|
|
data-target="#navigation"
|
|
aria-controls="navigation-index"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-bar navbar-kebab"></span>
|
|
<span class="navbar-toggler-bar navbar-kebab"></span>
|
|
<span class="navbar-toggler-bar navbar-kebab"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav ml-auto ">
|
|
<div class="search-bar input-group">
|
|
<!-- <input type="text" class="form-control" placeholder="Search...">
|
|
<div class="input-group-addon"><i class="tim-icons icon-zoom-split"></i></div> -->
|
|
<button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal">
|
|
<i class="tim-icons icon-zoom-split"></i>
|
|
</button>
|
|
<!-- You can choose types of search input -->
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div></nav>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
routeName() {
|
|
const { name } = this.$route;
|
|
return this.capitalizeFirstLetter(name);
|
|
},
|
|
isRTL() {
|
|
return this.$rtl.isRTL;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeNotifications: false
|
|
};
|
|
},
|
|
methods: {
|
|
capitalizeFirstLetter(string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
},
|
|
toggleNotificationDropDown() {
|
|
this.activeNotifications = !this.activeNotifications;
|
|
},
|
|
closeDropDown() {
|
|
this.activeNotifications = false;
|
|
},
|
|
toggleSidebar() {
|
|
this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
|
|
},
|
|
hideSidebar() {
|
|
this.$sidebar.displaySidebar(false);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
</style>
|