assembly/components/sidebar/context/SidebarContextHeader.vue

44 lines
1.3 KiB
Vue
Raw Normal View History

2021-07-24 23:40:30 +00:00
<template>
2021-07-27 18:54:59 +00:00
<div class="flex-shrink-0 w-full mx-auto p-4">
2021-07-26 18:33:52 +00:00
<div class="flex justify-between items-center w-full">
2021-07-24 23:40:30 +00:00
<button
2021-07-26 18:33:52 +00:00
class="flex items-center justify-center text-opacity-50 group hover:text-opacity-100 focus:hover:text-opacity-100 text-grey-pure focus:outline-none"
2021-07-24 23:40:30 +00:00
@click="back"
>
<SVGArrowLeft
class="transition-transform duration-75 ease-out transform group-hover:-translate-x-1"
/>
</button>
2021-07-26 18:33:52 +00:00
<button
class="flex items-center justify-center text-opacity-50 group hover:text-opacity-100 focus:hover:text-opacity-100 text-grey-pure focus:outline-none"
@click="close"
>
<SVGClose class="w-3 h-3" />
</button>
</div>
<div>
<div class="w-full my-5 text-center text-primary-gray font-semibold text-lg"><slot /></div>
2021-07-24 23:40:30 +00:00
</div>
</div>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import SVGClose from '@/assets/icons/close.svg?inline'
import SVGArrowLeft from '@/assets/icons/arrow-left.svg?inline'
import { useSidebar } from '~/composables/useSidebar'
export default defineComponent({
components: {
SVGClose,
SVGArrowLeft,
},
setup() {
2021-07-26 18:33:52 +00:00
const { back, close } = useSidebar()
return { back, close }
2021-07-24 23:40:30 +00:00
},
})
</script>