modified: main_dc/BB/bbvue/src/App.vue
add profile icon into header, near hamburger menu
This commit is contained in:
@@ -19,12 +19,14 @@
|
||||
|
||||
<!-- Используем компонент меню -->
|
||||
<div class="menu-box">
|
||||
<div class="menu-box-item">
|
||||
<Icon icon="material-symbols:account-circle" class="profile-icon" />
|
||||
<!-- Отображение зависит от авторизации -->
|
||||
<div class="menu-box-item" v-if="isAuthenticated">
|
||||
<Icon icon="material-symbols:account-circle" class="profile-icon authed" />
|
||||
</div>
|
||||
<div class="menu-box-item">
|
||||
<Icon icon="material-symbols:no-accounts" class="profile-icon" />
|
||||
<div class="menu-box-item" v-else>
|
||||
<Icon icon="material-symbols:no-accounts" class="profile-icon nonAuthed" />
|
||||
</div>
|
||||
|
||||
<div class="menu-box-item h-menu">
|
||||
<NavigationMenu />
|
||||
</div>
|
||||
@@ -45,9 +47,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import NavigationMenu from './components/NavigationMenu.vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useAuthStore } from '@/src/stores/auth' // Добавлен импорт
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
@@ -61,6 +65,13 @@ export default {
|
||||
headerVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Получаем статус авторизации из стора
|
||||
isAuthenticated() {
|
||||
const authStore = useAuthStore()
|
||||
return authStore.isAuthenticated
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShowHeader() {
|
||||
this.showHeader = true
|
||||
@@ -74,8 +85,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* Остальные стили остаются без изменений */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -90,13 +101,22 @@ export default {
|
||||
}
|
||||
|
||||
.menu-box-item {
|
||||
height: fit-content;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile-icon {
|
||||
color: rgb(30, 255, 0);
|
||||
}
|
||||
|
||||
.h-menu {
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
Reference in New Issue
Block a user