Łukasz Holeczek
107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<CHeader position="sticky" class="mb-4">
|
|
<CContainer fluid>
|
|
<CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
|
|
<CIcon icon="cil-menu" size="lg" />
|
|
</CHeaderToggler>
|
|
<CHeaderBrand class="mx-auto d-lg-none" to="/">
|
|
<CIcon name="logo" height="48" alt="Logo" />
|
|
</CHeaderBrand>
|
|
<CHeaderNav class="d-md-down-none me-auto">
|
|
<CNavItem>
|
|
<CNavLink href="/dashboard"> Dashboard </CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">Users</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">Settings</CNavLink>
|
|
</CNavItem>
|
|
</CHeaderNav>
|
|
<CHeaderNav class="me-4">
|
|
<CNavItem class="d-md-down-none mx-2">
|
|
<CNavLink>
|
|
<CIcon icon="cil-bell" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem class="d-md-down-none mx-2">
|
|
<CNavLink>
|
|
<CIcon icon="cil-list" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem class="d-md-down-none mx-2">
|
|
<CNavLink>
|
|
<CIcon icon="cil-envelope-open" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<AppHeaderDropdownAccnt />
|
|
</CHeaderNav>
|
|
</CContainer>
|
|
<CHeaderDivider />
|
|
<CContainer fluid>
|
|
<CBreadcrumb class="d-md-down-none me-auto mb-0">
|
|
<CBreadcrumbItem
|
|
v-for="item in breadcrumbs"
|
|
:href="item.to"
|
|
:active="item.to === '' ? true : false"
|
|
:key="item"
|
|
>
|
|
{{ item.name }}
|
|
</CBreadcrumbItem>
|
|
</CBreadcrumb>
|
|
</CContainer>
|
|
</CHeader>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { onBeforeRouteUpdate } from 'vue-router'
|
|
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
|
|
import router from '../router'
|
|
export default {
|
|
name: 'AppHeader',
|
|
components: {
|
|
AppHeaderDropdownAccnt,
|
|
},
|
|
setup() {
|
|
const upperCaseFirstChar = (string) =>
|
|
string.substr(0, 1).toUpperCase() + string.substr(1)
|
|
|
|
const makeCurrentRoute = () => {
|
|
let result = [
|
|
{ to: '/', name: 'Home'}
|
|
]
|
|
let path = router.currentRoute._value.path
|
|
let temp = path.split('/')
|
|
let to = ''
|
|
if (temp.length <= 2) {
|
|
result.push({ to: '', name: router.currentRoute._value.name })
|
|
} else {
|
|
for (let i = 1; i < temp.length - 1; i++) {
|
|
for (let j = 1; j <= i; j++) {
|
|
to += `/${temp[j]}`
|
|
}
|
|
result.push({ to: to, name: upperCaseFirstChar(temp[i]) })
|
|
}
|
|
result.push({ to: '', name: router.currentRoute._value.name })
|
|
}
|
|
return result
|
|
}
|
|
|
|
const breadcrumbs = ref([])
|
|
|
|
onBeforeRouteUpdate(() => {
|
|
breadcrumbs.value = makeCurrentRoute()
|
|
})
|
|
|
|
onMounted(() => {
|
|
breadcrumbs.value = makeCurrentRoute()
|
|
})
|
|
|
|
return {
|
|
breadcrumbs,
|
|
}
|
|
},
|
|
}
|
|
</script>
|