<template>
    <PageHeader v-bind:hasBack="true" v-bind:titleText="$t('market.market_title')">
        <div class="relative">
            <div class="opacity-80 hover:opacity-100 translate-x-1">
                <PrimaryIconButton v-on:click.stop="state.mainMenu.open" iconName="plus"></PrimaryIconButton>
            </div>
            <div v-outside-click="state.mainMenu.close" v-if="state.mainMenu.status" class="absolute top-full right-0 w-96 z-50">
				<RichMenu>
					<a v-bind:href="$getRoute('business_dashboard_index')" target="_blank" class="block">
						<RichMenuItem
							v-bind:title="$t('market.nav_menu.create_product.title')"
							v-bind:description="$t('market.nav_menu.create_product.description')"
							trailingIconName="arrow-up-right"
						iconName="shopping-bag-03" iconType="solid"></RichMenuItem>
					</a>
					<Border></Border>
					<RouterLink v-bind:to="{ name: 'saved_products' }" class="block">
						<RichMenuItem
							v-bind:title="$t('market.nav_menu.bookmarks.title')"
							v-bind:description="$t('market.nav_menu.bookmarks.description')"
							trailingIconName="arrow-up-right"
						iconName="bookmark" iconType="solid"></RichMenuItem>
					</RouterLink>
				</RichMenu>
			</div>
        </div>
    </PageHeader>
</template>

<script>
    import { defineComponent, reactive } from 'vue';
    import { useMenu } from '@/kernel/vue/composables/menu/index.js';

	import PageHeader from '@D/components/layout/PageHeader.vue';
	import PrimaryIconButton from '@D/components/inter-ui/buttons/PrimaryIconButton.vue';
    import RichMenu from '@D/components/general/rich-menu/RichMenu.vue';
	import RichMenuItem from '@D/components/general/rich-menu/RichMenuItem.vue';

    export default defineComponent({
        setup: function() {
            const state = reactive({
                mainMenu: useMenu()
            });

            return {
                state: state
            };
        },
		components: {
			PageHeader: PageHeader,
			PrimaryIconButton: PrimaryIconButton,
            RichMenu: RichMenu,
            RichMenuItem: RichMenuItem
		}
    });
</script>