54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
|
|
:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
|
|
>
|
|
<div
|
|
class="flex flex-col overflow-hidden"
|
|
:class="isSidebarCollapsed ? 'items-center' : ''"
|
|
>
|
|
<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
|
|
<div class="flex flex-col overflow-y-auto">
|
|
<SidebarLink
|
|
v-for="link in links"
|
|
:link="link"
|
|
:isCollapsed="isSidebarCollapsed"
|
|
class="mx-2 my-0.5"
|
|
/>
|
|
</div>
|
|
</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 CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
|
|
import SidebarLink from '@/components/SidebarLink.vue'
|
|
import { useStorage } from '@vueuse/core'
|
|
import { ref } from 'vue'
|
|
import { getSidebarLinks } from '../utils'
|
|
|
|
const links = getSidebarLinks()
|
|
|
|
const getSidebarFromStorage = () => {
|
|
return useStorage('sidebar_is_collapsed', false)
|
|
}
|
|
|
|
let isSidebarCollapsed = ref(getSidebarFromStorage())
|
|
</script>
|