Files
template-nuxtsim/components/layout/full/vertical-header/ProfileDD.vue

78 lines
2.6 KiB
Vue
Executable File

<script setup lang="ts">
import { signOut } from "next-auth/react";
import { profileDD } from "@/_mockApis/headerData";
const { data, status, getCsrfToken, getProviders } = useAuth()
const runtimeConfig = useRuntimeConfig()
const logout = async () => {
await signOut()
const LogOutKeycloakURL = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect`
const logOutURL = `${LogOutKeycloakURL}/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}/auth/login`;
window.location.href = logOutURL
}
</script>
<template>
<!-- ---------------------------------------------- -->
<!-- notifications DD -->
<!-- ---------------------------------------------- -->
<v-menu open-on-hover open-on-click>
<template v-slot:activator="{ props }">
<v-btn
variant="text"
class="custom-hover-primary"
color="primary"
v-bind="props"
icon
>
<v-avatar size="35">
<img
src="@/assets/images/profile/user-1.jpg"
width="35"
alt="Julia"
/>
</v-avatar>
</v-btn>
</template>
<v-sheet rounded="md" width="280" elevation="10">
<div class="pa-6">
<div class="d-flex align-center pb-6">
<v-avatar size="55">
<img src="@/assets/images/profile/user-1.jpg" width="55" />
</v-avatar>
<div class="ml-3">
<h6 class="text-subtitle-1">
David McMichael <span class="text-success text-caption">Pro</span>
</h6>
<span class="text-subtitle-1 textSecondary"
>david@wrappixel.com</span
>
</div>
</div>
<v-divider></v-divider>
<perfect-scrollbar
style="height: calc(100vh - 300px); max-height: 300px"
>
<v-list class="py-0 theme-list mt-3" lines="one">
<v-list-item
v-for="item in profileDD"
:key="item.title"
class="py-0 px-2 rounded-md custom-text-primary"
color="primary"
:to="item.href"
>
<div class="d-flex gap-3 align-center">
<p class="text-subtitle-1 heading custom-title">
{{ item.title }}
</p>
<v-chip size="small" color="error" v-if="item.badge">4</v-chip>
</div>
</v-list-item>
<v-btn @click="logout" color="primary" variant="outlined" block>Logout</v-btn>
</v-list>
</perfect-scrollbar>
</div>
</v-sheet>
</v-menu>
</template>