74 lines
3.2 KiB
Vue
74 lines
3.2 KiB
Vue
<template>
|
|
<nav class="relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap lg:justify-start">
|
|
<div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
|
|
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
|
|
<li class="text-sm leading-normal">
|
|
<RouterLink class="opacity-50 text-slate-700" to="/">Pages</RouterLink>
|
|
</li>
|
|
<li
|
|
class="text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:content-['/']"
|
|
aria-current="page"
|
|
>
|
|
{{ title }}
|
|
</li>
|
|
</ol>
|
|
<h6 class="mb-0 font-bold capitalize">{{ title }}</h6>
|
|
</nav>
|
|
|
|
<button
|
|
type="button"
|
|
class="inline-block p-0 font-bold text-center uppercase align-middle transition-all ease-in border-0 rounded-lg cursor-pointer text-xs leading-pro xl:hidden"
|
|
@click="$emit('toggle-sidebar')"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<i class="fas fa-bars text-slate-700"></i>
|
|
</button>
|
|
|
|
<div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto">
|
|
<div class="flex items-center md:ml-auto md:pr-4">
|
|
<div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
|
|
<span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
class="pl-8.75 text-sm focus:shadow-soft-primary-outline ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow"
|
|
placeholder="Search..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
|
|
<li class="flex items-center">
|
|
<button
|
|
class="block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500 hover:text-slate-700 bg-transparent border-0 cursor-pointer"
|
|
@click="handleLogout"
|
|
>
|
|
<i class="fas fa-sign-out-alt text-lg mr-1"></i>
|
|
<span class="sm:inline">{{ auth.user?.name ?? 'Account' }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouterLink, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
defineProps<{ title: string }>()
|
|
defineEmits<{ 'toggle-sidebar': [] }>()
|
|
|
|
const auth = useAuthStore()
|
|
const router = useRouter()
|
|
|
|
function handleLogout() {
|
|
auth.logout()
|
|
router.push({ name: 'login' })
|
|
}
|
|
</script>
|