80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<script setup>
|
|
import logo from '@/assets/Apollo_simple_logo.webp';
|
|
import { useLayout } from '@/layout/composables/layout';
|
|
import { useAuth } from '@websanova/vue-auth/src/v3.js';
|
|
import { ref } from 'vue';
|
|
//import AppConfigurator from './AppConfigurator.vue';
|
|
import AppProfileMenu from './AppProfileMenu.vue';
|
|
|
|
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
|
|
const auth = useAuth();
|
|
const logoSrc = ref(logo);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout-topbar">
|
|
<div class="layout-topbar-logo-container">
|
|
<button class="layout-topbar-action" @click="onMenuToggle"> <!--class layout-menu-button -->
|
|
<i class="pi pi-bars"></i>
|
|
</button>
|
|
|
|
<router-link to="/" class="layout-topbar-logo">
|
|
<img :src="logoSrc" alt="Logo" class="logo-image" />
|
|
|
|
<span>APOLLO</span>
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="layout-topbar-actions">
|
|
<div class="layout-config-menu">
|
|
<button type="button" class="layout-topbar-action" @click="toggleDarkMode">
|
|
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
|
|
</button>
|
|
<!--div class="relative">
|
|
<button
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
type="button" class="layout-topbar-action layout-topbar-action-highlight">
|
|
<i class="pi pi-palette"></i>
|
|
</button>
|
|
<AppConfigurator />
|
|
</div-->
|
|
</div>
|
|
|
|
<button class="layout-topbar-menu-button layout-topbar-action"
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">
|
|
<i class="pi pi-ellipsis-v"></i>
|
|
</button>
|
|
|
|
<div class="layout-topbar-menu hidden lg:block">
|
|
<div class="layout-topbar-menu-content">
|
|
|
|
<button
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
type="button" class="layout-topbar-action ">
|
|
<i class="pi pi-user"></i>
|
|
</button>
|
|
<AppProfileMenu />
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo-image {
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
/* Adjust the size as needed */
|
|
height: 40px;
|
|
/* Adjust the size as needed */
|
|
object-fit: cover;
|
|
/* Ensures the logo scales nicely within the circle */
|
|
}
|
|
</style>
|