50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-4">
|
|
<Link class="flex items-center group py-3" href="/">
|
|
<icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
|
|
<div :class="isUrl('') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Dashboard</div>
|
|
</Link>
|
|
</div>
|
|
<div class="mb-4">
|
|
<Link class="flex items-center group py-3" href="/organizations">
|
|
<icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
|
|
<div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
|
|
</Link>
|
|
</div>
|
|
<div class="mb-4">
|
|
<Link class="flex items-center group py-3" href="/contacts">
|
|
<icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
|
|
<div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
|
|
</Link>
|
|
</div>
|
|
<div class="mb-4">
|
|
<Link class="flex items-center group py-3" href="/reports">
|
|
<icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
|
|
<div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Link } from '@inertiajs/inertia-vue3'
|
|
import Icon from '@/Shared/Icon'
|
|
|
|
export default {
|
|
components: {
|
|
Icon,
|
|
Link,
|
|
},
|
|
methods: {
|
|
isUrl(...urls) {
|
|
let currentUrl = this.$page.url.substr(1)
|
|
if (urls[0] === '') {
|
|
return currentUrl === ''
|
|
}
|
|
return urls.filter(url => currentUrl.startsWith(url)).length
|
|
},
|
|
},
|
|
}
|
|
</script>
|