inicios del FrontEnd
This commit is contained in:
17
APP/components/Layout/Content.vue
Executable file
17
APP/components/Layout/Content.vue
Executable file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<FadeTransition :duration="200" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<nuxt></nuxt>
|
||||
</FadeTransition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { FadeTransition } from 'vue2-transitions';
|
||||
export default {
|
||||
components: {
|
||||
FadeTransition
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
40
APP/components/Layout/ContentFooter.vue
Executable file
40
APP/components/Layout/ContentFooter.vue
Executable file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<ul class="nav">
|
||||
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="nav-link"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
© {{ year }}, hecho con <i class="tim-icons icon-heart-2"></i> por
|
||||
|
||||
<a
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>mdchaparror</a
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
year: new Date().getFullYear()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
293
APP/components/Layout/DashboardLayout.vue
Executable file
293
APP/components/Layout/DashboardLayout.vue
Executable file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
|
||||
<notifications></notifications>
|
||||
<side-bar
|
||||
:background-color="sidebarBackground"
|
||||
:short-title="$t('sidebar.shortTitle')"
|
||||
:title="$t('sidebar.title')"
|
||||
>
|
||||
<template slot-scope="props" slot="links">
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.dashboard'),
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/dashboard'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.pages'), icon: 'tim-icons icon-image-02' }"
|
||||
>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.pricing'), path: '/pricing' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.rtl'), path: '/pages/rtl' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.timeline'), path: '/pages/timeline' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.login'), path: '/login' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.register'), path: '/register' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.lock'), path: '/lock' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.userProfile'), path: '/pages/user' }"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.components'),
|
||||
icon: 'tim-icons icon-molecule-40'
|
||||
}"
|
||||
>
|
||||
<sidebar-item :link="{ name: $t('sidebar.multiLevelCollapse') }">
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.example'),
|
||||
isRoute: false,
|
||||
path: 'https://google.com',
|
||||
target: '_blank'
|
||||
}"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.buttons'), path: '/components/buttons' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.gridSystem'),
|
||||
path: '/components/grid-system'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.panels'), path: '/components/panels' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.sweetAlert'),
|
||||
path: '/components/sweet-alert'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.notifications'),
|
||||
path: '/components/notifications'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.icons'), path: '/components/icons' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.typography'),
|
||||
path: '/components/typography'
|
||||
}"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.forms'), icon: 'tim-icons icon-notes' }"
|
||||
>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.regularForms'), path: '/forms/regular' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.extendedForms'),
|
||||
path: '/forms/extended'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.validationForms'),
|
||||
path: '/forms/validation'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.wizard'), path: '/forms/wizard' }"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.tables'),
|
||||
icon: 'tim-icons icon-puzzle-10'
|
||||
}"
|
||||
>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.regularTables'),
|
||||
path: '/table-list/regular'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.extendedTables'),
|
||||
path: '/table-list/extended'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.paginatedTables'),
|
||||
path: '/table-list/paginated'
|
||||
}"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.maps'), icon: 'tim-icons icon-pin' }"
|
||||
>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.googleMaps'), path: '/maps/google' }"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.fullScreenMaps'),
|
||||
path: '/maps/full-screen'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{ name: $t('sidebar.vectorMaps'), path: '/maps/vector-map' }"
|
||||
></sidebar-item>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.widgets'),
|
||||
icon: 'tim-icons icon-settings',
|
||||
path: '/widgets'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.charts'),
|
||||
icon: 'tim-icons icon-chart-bar-32',
|
||||
path: '/charts'
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.calendar'),
|
||||
icon: 'tim-icons icon-time-alarm',
|
||||
path: '/calendar'
|
||||
}"
|
||||
></sidebar-item>
|
||||
</template>
|
||||
</side-bar>
|
||||
<!--Share plugin (for demo purposes). You can remove it if don't plan on using it-->
|
||||
<sidebar-share :background-color.sync="sidebarBackground"> </sidebar-share>
|
||||
<div class="main-panel" :data="sidebarBackground">
|
||||
<dashboard-navbar></dashboard-navbar>
|
||||
<router-view name="header"></router-view>
|
||||
|
||||
<div
|
||||
:class="{ content: !$route.meta.hideContent }"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<zoom-center-transition :duration="200" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<nuxt></nuxt>
|
||||
</zoom-center-transition>
|
||||
</div>
|
||||
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable no-new */
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||||
import SidebarShare from './SidebarSharePlugin';
|
||||
function hasElement(className) {
|
||||
return document.getElementsByClassName(className).length > 0;
|
||||
}
|
||||
|
||||
function initScrollbar(className) {
|
||||
if (hasElement(className)) {
|
||||
new PerfectScrollbar(`.${className}`);
|
||||
} else {
|
||||
// try to init it later in case this component is loaded async
|
||||
setTimeout(() => {
|
||||
initScrollbar(className);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
import DashboardNavbar from './DashboardNavbar.vue';
|
||||
import ContentFooter from './ContentFooter.vue';
|
||||
import DashboardContent from './Content.vue';
|
||||
import { SlideYDownTransition, ZoomCenterTransition } from 'vue2-transitions';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardNavbar,
|
||||
ContentFooter,
|
||||
DashboardContent,
|
||||
SlideYDownTransition,
|
||||
ZoomCenterTransition,
|
||||
SidebarShare
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarBackground: 'vue' //vue|blue|orange|green|red|primary
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSidebar() {
|
||||
if (this.$sidebar.showSidebar) {
|
||||
this.$sidebar.displaySidebar(false);
|
||||
}
|
||||
},
|
||||
initScrollbar() {
|
||||
let docClasses = document.body.classList;
|
||||
let isWindows = navigator.platform.startsWith('Win');
|
||||
if (isWindows) {
|
||||
// if we are on windows OS we activate the perfectScrollbar function
|
||||
initScrollbar('sidebar');
|
||||
initScrollbar('main-panel');
|
||||
initScrollbar('sidebar-wrapper');
|
||||
|
||||
docClasses.add('perfect-scrollbar-on');
|
||||
} else {
|
||||
docClasses.add('perfect-scrollbar-off');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollbar();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$scaleSize: 0.95;
|
||||
@keyframes zoomIn95 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomIn {
|
||||
animation-name: zoomIn95;
|
||||
}
|
||||
|
||||
@keyframes zoomOut95 {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomOut {
|
||||
animation-name: zoomOut95;
|
||||
}
|
||||
</style>
|
||||
133
APP/components/Layout/DashboardNavbar.vue
Executable file
133
APP/components/Layout/DashboardNavbar.vue
Executable file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<base-nav
|
||||
v-model="showMenu"
|
||||
class="navbar-absolute top-navbar"
|
||||
type="white"
|
||||
:transparent="true"
|
||||
>
|
||||
<div slot="brand" class="navbar-wrapper">
|
||||
<div
|
||||
class="navbar-toggle d-inline"
|
||||
:class="{ toggled: $sidebar.showSidebar }"
|
||||
>
|
||||
<button type="button" class="navbar-toggler" @click="toggleSidebar">
|
||||
<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 ml-xl-3 ml-5" href="#pablo">{{ routeName }}</a>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
|
||||
<div class="search-bar input-group" @click="searchModalVisible = true">
|
||||
<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>
|
||||
<modal
|
||||
:show.sync="searchModalVisible"
|
||||
class="modal-search"
|
||||
id="searchModal"
|
||||
:centered="false"
|
||||
:show-close="true"
|
||||
>
|
||||
<input
|
||||
slot="header"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="inlineFormInputGroup"
|
||||
placeholder="SEARCH"
|
||||
/>
|
||||
</modal>
|
||||
<base-dropdown
|
||||
tag="li"
|
||||
:menu-on-right="!$rtl.isRTL"
|
||||
title-tag="a"
|
||||
title-classes="nav-link"
|
||||
class="nav-item"
|
||||
>
|
||||
|
||||
<template
|
||||
slot="title"
|
||||
>
|
||||
<div class="photo"><img src="img/mdchaparror.png" /></div>
|
||||
<b class="caret d-none d-lg-block d-xl-block"></b>
|
||||
<p class="d-lg-none">Log out</p>
|
||||
</template>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Profile</a>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Settings</a>
|
||||
</li>
|
||||
<div class="dropdown-divider"></div>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Log out</a>
|
||||
</li>
|
||||
</base-dropdown>
|
||||
</ul>
|
||||
</base-nav>
|
||||
</template>
|
||||
<script>
|
||||
import { CollapseTransition } from 'vue2-transitions';
|
||||
import { BaseNav, Modal } from '@/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CollapseTransition,
|
||||
BaseNav,
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
routeName() {
|
||||
const { path } = this.$route;
|
||||
let parts = path.split('/')
|
||||
if(parts == ','){
|
||||
return 'Dashboard';
|
||||
}
|
||||
return parts.map(p => this.capitalizeFirstLetter(p)).join(' ');
|
||||
},
|
||||
isRTL() {
|
||||
return this.$rtl.isRTL;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNotifications: false,
|
||||
showMenu: false,
|
||||
searchModalVisible: false,
|
||||
searchQuery: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
capitalizeFirstLetter(string) {
|
||||
if (!string || typeof string !== 'string') {
|
||||
return ''
|
||||
}
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
closeDropDown() {
|
||||
this.activeNotifications = false;
|
||||
},
|
||||
toggleSidebar() {
|
||||
this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
|
||||
},
|
||||
toggleMenu() {
|
||||
this.showMenu = !this.showMenu;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.top-navbar {
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
25
APP/components/Layout/LoadingMainPanel.vue
Executable file
25
APP/components/Layout/LoadingMainPanel.vue
Executable file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="row" v-loading="true" id="loading"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Loading } from 'element-ui';
|
||||
|
||||
Vue.use(Loading.directive);
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
#loading {
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: #66615b !important;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
106
APP/components/Layout/SidebarSharePlugin.vue
Normal file
106
APP/components/Layout/SidebarSharePlugin.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="fixed-plugin" v-click-outside="closeDropDown">
|
||||
<div class="dropdown show-dropdown" :class="{ show: isOpen }">
|
||||
<a data-toggle="dropdown" class="settings-icon">
|
||||
<i class="fa fa-cog fa-2x" @click="toggleDropDown"> </i>
|
||||
</a>
|
||||
<ul class="dropdown-menu" :class="{ show: isOpen }">
|
||||
<li class="header-title">Sidebar Background</li>
|
||||
<li class="adjustments-line">
|
||||
<a class="switch-trigger background-color">
|
||||
<div class="badge-colors text-center">
|
||||
<span
|
||||
v-for="item in sidebarColors"
|
||||
:key="item.color"
|
||||
class="badge filter"
|
||||
:class="[`badge-${item.color}`, { active: item.active }]"
|
||||
:data-color="item.color"
|
||||
@click="changeSidebarBackground(item);"
|
||||
></span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="header-title">Sidebar Mini</li>
|
||||
<li class="adjustments-line">
|
||||
<div class="togglebutton switch-change-color mt-3">
|
||||
<span class="label-switch">LIGHT MODE</span>
|
||||
<base-switch v-model="darkMode" @input="toggleMode"></base-switch>
|
||||
<span class="label-switch label-right">DARK MODE</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BaseSwitch } from '@/components';
|
||||
|
||||
export default {
|
||||
name: 'sidebar-share',
|
||||
components: {
|
||||
BaseSwitch
|
||||
},
|
||||
props: {
|
||||
backgroundColor: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarMini: true,
|
||||
darkMode: false,
|
||||
isOpen: false,
|
||||
sidebarColors: [
|
||||
{ color: 'primary', active: false, value: 'primary' },
|
||||
{ color: 'vue', active: true, value: 'vue' },
|
||||
{ color: 'info', active: false, value: 'blue' },
|
||||
{ color: 'success', active: false, value: 'green' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDropDown() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
closeDropDown() {
|
||||
this.isOpen = false;
|
||||
},
|
||||
toggleList(list, itemToActivate) {
|
||||
list.forEach(listItem => {
|
||||
listItem.active = false;
|
||||
});
|
||||
itemToActivate.active = true;
|
||||
},
|
||||
changeSidebarBackground(item) {
|
||||
this.$emit('update:backgroundColor', item.value);
|
||||
this.toggleList(this.sidebarColors, item);
|
||||
},
|
||||
toggleMode(type) {
|
||||
let docClasses = document.body.classList;
|
||||
if (type) {
|
||||
docClasses.remove('white-content');
|
||||
} else {
|
||||
docClasses.add('white-content');
|
||||
}
|
||||
},
|
||||
minimizeSidebar() {
|
||||
this.$sidebar.toggleMinimize();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '~@/assets/sass/dashboard/custom/variables';
|
||||
|
||||
.settings-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badge-vue {
|
||||
background-color: $vue;
|
||||
}
|
||||
</style>
|
||||
49
APP/components/Layout/starter/SampleFooter.vue
Normal file
49
APP/components/Layout/starter/SampleFooter.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://example.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="nav-link"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://example.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="nav-link"
|
||||
>
|
||||
Another Link
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
© {{ year }}, made with <i class="tim-icons icon-heart-2"></i> by
|
||||
|
||||
<a
|
||||
href="https://www.creative-tim.com/?ref=pdf-vuejs"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Creative Tim</a
|
||||
>
|
||||
for a better web.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
year: new Date().getFullYear()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
137
APP/components/Layout/starter/SampleNavbar.vue
Normal file
137
APP/components/Layout/starter/SampleNavbar.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<base-nav
|
||||
v-model="showMenu"
|
||||
class="navbar-absolute top-navbar"
|
||||
type="white"
|
||||
:transparent="true"
|
||||
>
|
||||
<div slot="brand" class="navbar-wrapper">
|
||||
<div
|
||||
class="navbar-toggle d-inline"
|
||||
:class="{ toggled: $sidebar.showSidebar }"
|
||||
>
|
||||
<button type="button" class="navbar-toggler" @click="toggleSidebar">
|
||||
<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>
|
||||
|
||||
<ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
|
||||
<div class="search-bar input-group" @click="searchModalVisible = true">
|
||||
<!--
|
||||
<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>
|
||||
<modal
|
||||
:show.sync="searchModalVisible"
|
||||
class="modal-search"
|
||||
id="searchModal"
|
||||
:centered="false"
|
||||
:show-close="true"
|
||||
>
|
||||
<input
|
||||
slot="header"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="inlineFormInputGroup"
|
||||
placeholder="SEARCH"
|
||||
/>
|
||||
</modal>
|
||||
<base-dropdown
|
||||
tag="li"
|
||||
:menu-on-right="!$rtl.isRTL"
|
||||
title-tag="a"
|
||||
class="nav-item"
|
||||
title-classes="nav-link"
|
||||
menu-classes="dropdown-navbar"
|
||||
>
|
||||
<template
|
||||
slot="title"
|
||||
>
|
||||
<div class="photo"><img src="img/mike.jpg" /></div>
|
||||
<b class="caret d-none d-lg-block d-xl-block"></b>
|
||||
<p class="d-lg-none">Log out</p>
|
||||
</template>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Profile</a>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Settings</a>
|
||||
</li>
|
||||
<div class="dropdown-divider"></div>
|
||||
<li class="nav-link">
|
||||
<a href="#" class="nav-item dropdown-item">Log out</a>
|
||||
</li>
|
||||
</base-dropdown>
|
||||
</ul>
|
||||
</base-nav>
|
||||
</template>
|
||||
<script>
|
||||
import { CollapseTransition } from 'vue2-transitions';
|
||||
import { BaseNav, Modal } from '@/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CollapseTransition,
|
||||
BaseNav,
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
routeName() {
|
||||
const { path } = this.$route;
|
||||
let parts = path.split('/')
|
||||
return parts.map(p => this.capitalizeFirstLetter(p)).join(' ');
|
||||
},
|
||||
isRTL() {
|
||||
return this.$rtl.isRTL;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNotifications: false,
|
||||
showMenu: false,
|
||||
searchModalVisible: false,
|
||||
searchQuery: ''
|
||||
};
|
||||
},
|
||||
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);
|
||||
},
|
||||
toggleMenu() {
|
||||
this.showMenu = !this.showMenu;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.top-navbar {
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user