81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<template>
|
||
<div class="mode-switcher">
|
||
<div class="flex items-center space-x-4">
|
||
<!-- B2B/B2C Toggle -->
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('switchMode') }}</span>
|
||
<button
|
||
@click="toggleAppMode"
|
||
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
||
:class="isCorporate ? 'bg-corporate-blue' : 'bg-consumer-orange'"
|
||
>
|
||
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
||
:class="isCorporate ? 'translate-x-6' : 'translate-x-1'"
|
||
/>
|
||
</button>
|
||
<span class="text-sm font-medium min-w-[60px] dark:text-gray-300">
|
||
{{ isCorporate ? $t('corporate') : $t('consumer') }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Admin Switch (only for admins) -->
|
||
<div v-if="showAdminSwitch" class="flex items-center space-x-2">
|
||
<div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||
<button
|
||
@click="goToAdmin"
|
||
class="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 text-white hover:opacity-90 transition-opacity"
|
||
>
|
||
<span class="text-sm">⚙️</span>
|
||
<span class="text-sm font-medium">Admin</span>
|
||
</button>
|
||
<button
|
||
v-if="isInAdminMode"
|
||
@click="exitAdmin"
|
||
class="px-3 py-1.5 rounded-lg bg-red-900/30 hover:bg-red-900/50 text-red-400 text-sm font-medium transition-colors"
|
||
>
|
||
Exit Admin
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useAppModeStore } from '../stores/appModeStore'
|
||
import { useAuthStore } from '../stores/authStore'
|
||
|
||
const { t } = useI18n()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const appModeStore = useAppModeStore()
|
||
const authStore = useAuthStore()
|
||
|
||
const isCorporate = computed(() => appModeStore.isCorporate)
|
||
const isInAdminMode = computed(() => route.path.startsWith('/admin'))
|
||
|
||
const showAdminSwitch = computed(() => {
|
||
// Check if user has admin privileges
|
||
return authStore.isAdmin
|
||
})
|
||
|
||
function toggleAppMode() {
|
||
appModeStore.toggleMode()
|
||
}
|
||
|
||
function goToAdmin() {
|
||
router.push('/admin')
|
||
}
|
||
|
||
function exitAdmin() {
|
||
router.push('/')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mode-switcher {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
</style> |