82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
|
|
:class="isSidebarCollapsed ? 'w-12' : 'w-56'"
|
|
>
|
|
<div class="flex flex-col">
|
|
<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
|
|
<SidebarLink
|
|
v-for="link in links"
|
|
:icon="link.icon"
|
|
:label="link.label"
|
|
:to="link.to"
|
|
:isCollapsed="isSidebarCollapsed"
|
|
class="mx-2 my-0.5"
|
|
/>
|
|
</div>
|
|
<SidebarLink
|
|
:label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
|
|
:isCollapsed="isSidebarCollapsed"
|
|
@click="isSidebarCollapsed = !isSidebarCollapsed"
|
|
class="m-2"
|
|
>
|
|
<template #icon>
|
|
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
|
|
<CollapseSidebar
|
|
class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
|
|
:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</SidebarLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import UserDropdown from '@/components/UserDropdown.vue'
|
|
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
|
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
|
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
|
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
|
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
|
|
import SidebarLink from '@/components/SidebarLink.vue'
|
|
import { useStorage } from '@vueuse/core'
|
|
|
|
const links = [
|
|
{
|
|
label: 'Leads',
|
|
icon: LeadsIcon,
|
|
to: 'Leads',
|
|
},
|
|
{
|
|
label: 'Deals',
|
|
icon: DealsIcon,
|
|
to: 'Deals',
|
|
},
|
|
{
|
|
label: 'Contacts',
|
|
icon: ContactsIcon,
|
|
to: 'Contacts',
|
|
},
|
|
{
|
|
label: 'Organizations',
|
|
icon: OrganizationsIcon,
|
|
to: 'Organizations',
|
|
},
|
|
{
|
|
label: 'Notes',
|
|
icon: NoteIcon,
|
|
to: 'Notes',
|
|
},
|
|
{
|
|
label: 'Call Logs',
|
|
icon: PhoneIcon,
|
|
to: 'Call Logs',
|
|
},
|
|
]
|
|
|
|
const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
|
|
</script>
|