You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

115 lines
2.1 KiB

<script setup>
import { useChatStore } from "@/stores/chat";
import { Setting as SettingIcon } from "@element-plus/icons-vue";
const store = useChatStore();
</script>
<template>
<el-row>
<el-avatar
shape="square"
:size="40"
class="userAvatar"
:src="store.userInfo.avatar"
/>
</el-row>
<el-row @click="store.setCurrentNavId(0)">
<div class="menu-icon-box">
<el-icon
v-if="store.currentNavId === 0"
class="menu-icon-on"
>
<ChatLineRound />
</el-icon>
<el-icon
v-else
class="menu-icon"
>
<ChatRound />
</el-icon>
</div>
</el-row>
<el-row @click="store.setCurrentNavId(1)">
<div class="menu-icon-box">
<el-icon
v-if="store.currentNavId === 1"
class="menu-icon-on"
>
<UserFilled />
</el-icon>
<el-icon
v-else
class="menu-icon"
>
<User />
</el-icon>
</div>
</el-row>
<el-row @click="store.setCurrentNavId(2)">
<div class="menu-icon-box">
<el-icon
v-if="store.currentNavId === 2"
class="menu-icon-on"
>
<Platform />
</el-icon>
<el-icon
v-else
class="menu-icon"
>
<Monitor />
</el-icon>
</div>
</el-row>
<el-row @click="store.setCurrentNavId(5)">
<div class="menu-icon-box">
<el-icon
v-if="store.currentNavId === 5"
class="menu-icon-on"
>
<SettingIcon />
</el-icon>
<el-icon
v-else
class="menu-icon"
>
<SettingIcon />
</el-icon>
</div>
</el-row>
</template>
<style scoped>
.userAvatar {
margin: 6px auto;
-webkit-app-region: no-drag;
}
.menu-icon-box {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 10px auto;
/* border-radius: 15%; */
transition: all 0.5s;
}
/* .menu-icon-box:hover {
background-color: #d9d9d9;
} */
.menu-icon {
margin: 0px auto;
font-size: 25px;
cursor: pointer;
}
.menu-icon-on {
margin: 0px auto;
font-size: 25px;
color: #2A6BF2;
cursor: pointer;
}
</style>