121 lines
3.2 KiB
Vue
121 lines
3.2 KiB
Vue
<template>
|
|
<section
|
|
class="sticky flex items-center inset-x-0 top-0 z-20 py-3 bg-white border-b border-gray-200"
|
|
>
|
|
<div class="hidden md:flex flex-grow">
|
|
<slot name="left" />
|
|
</div>
|
|
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
|
|
<div class="flex items-center justify-center space-x-4">
|
|
<div
|
|
v-if="displayHome"
|
|
class="flex items-center"
|
|
>
|
|
<NuxtLink
|
|
class="text-gray-400 hover:text-gray-500"
|
|
:to="{ name: authenticated ? 'home' : 'index' }"
|
|
>
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Home</span>
|
|
</NuxtLink>
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div
|
|
v-for="(item, index) in path"
|
|
:key="index"
|
|
class="flex items-center"
|
|
>
|
|
<NuxtLink
|
|
v-if="item.route"
|
|
class="text-sm font-semibold text-gray-500 hover:text-gray-700 truncate"
|
|
:to="item.route"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
<div
|
|
v-else
|
|
class="text-sm font-semibold sm:w-full w-36 text-blue-500 truncate"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
<div v-if="index !== path.length - 1">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex flex-grow justify-end">
|
|
<slot name="right" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from "vue"
|
|
import { useAuthStore } from "../../stores/auth"
|
|
|
|
export default {
|
|
name: "Breadcrumb",
|
|
props: {
|
|
/**
|
|
* route: Route object
|
|
* label: Label
|
|
*/
|
|
path: { type: Array },
|
|
},
|
|
|
|
setup() {
|
|
const authStore = useAuthStore()
|
|
return {
|
|
authenticated: computed(() => authStore.check),
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
displayHome: true,
|
|
}
|
|
},
|
|
|
|
computed: {},
|
|
|
|
mounted() {},
|
|
|
|
methods: {},
|
|
}
|
|
</script>
|