jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-24 15:10:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add menu ui

Browse Source
This commit is contained in:
tim
2025-07-02 22:34:13 +08:00
parent ce2ff8c94a
commit f607b54957
4 changed files with 89 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
open-isle-cli/src/components/MenuComponent.vue
View File

@@ -1,9 +1,20 @@
<template>
<transition name="slide">
<nav v-if="visible" class="menu">
<ul>
<li><router-link to="/">Home</router-link></li>
</ul>
<div class="menu-item-container">
<div class="menu-item selected">
<i class="menu-item-icon fas fa-hashtag"></i>
<router-link class="menu-item-text" to="/">话题</router-link>
</div>
<div class="menu-item">
<i class="menu-item-icon fas fa-envelope"></i>
<router-link class="menu-item-text" to="/">我的消息</router-link>
</div>
<div class="menu-item">
<i class="menu-item-icon fas fa-info-circle"></i>
<router-link class="menu-item-text" to="/">关于</router-link>
</div>
</div>
</nav>
</transition>
</template>
@@ -25,7 +36,37 @@ export default {
width: 200px;
background-color: var(--menu-background-color);
height: calc(100vh - var(--header-height));
border-right: 1px solid var(--menu-border-color);
}
.menu-item-container {
padding: 10px;
}
.menu-item {
display: block;
padding: 4px 10px;
text-decoration: none;
color: var(--menu-text-color);
border-radius: 10px;
}
.menu-item.selected {
font-weight: bold;
background-color: var(--menu-selected-background-color);
}
.menu-item-text {
font-size: 16px;
text-decoration: none;
color: var(--menu-text-color);
}
.menu-item-icon {
margin-right: 10px;
opacity: 0.5;
}
.slide-enter-active, .slide-leave-active {
transition:
transform 0.3s ease,
@@ -35,11 +76,9 @@ export default {
.slide-enter-from, .slide-leave-to {
transform: translateX(-100%);
opacity: 0;
width: 0;
}
.slide-enter-to, .slide-leave-from {
transform: translateX(0);
opacity: 1;
width: 200px;
}
</style>