jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-06-09 19:47:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct theme toggle button position (#564)

Browse Source
This commit is contained in:
immortal521
2025-08-15 03:00:57 +08:00
parent b1f92f61a6
commit e573e54c2b
1 changed files with 121 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend_nuxt/components/MenuComponent.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<transition name="slide"> <transition name="slide">
<nav v-if="visible" class="menu"> <nav v-if="visible" class="menu">
<div class="menu-content">
<div class="menu-item-container"> <div class="menu-item-container">
<NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleItemClick"> <NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleItemClick">
<i class="menu-item-icon fas fa-hashtag"></i> <i class="menu-item-icon fas fa-hashtag"></i>
@@ -113,7 +114,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="menu-footer"> <div class="menu-footer">
<div class="menu-footer-btn" @click="cycleTheme"> <div class="menu-footer-btn" @click="cycleTheme">
<i :class="iconClass"></i> <i :class="iconClass"></i>
@@ -223,20 +224,28 @@ const gotoTag = (t) => {
.menu { .menu {
position: sticky; position: sticky;
top: var(--header-height); top: var(--header-height);
width: 200px; width: 220px;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
height: calc(100vh - 20px - var(--header-height)); height: calc(100vh - 20px - var(--header-height));
border-right: 1px solid var(--menu-border-color); border-right: 1px solid var(--menu-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
} }
.menu-item-container { .menu-content {
width: 100%;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 10px 0 10px;
} }
/* .menu-item-container { */
/**/
/* } */
.menu-item { .menu-item {
padding: 4px 10px; padding: 4px 10px;
text-decoration: none; text-decoration: none;
@@ -282,10 +291,8 @@ const gotoTag = (t) => {
} }
.menu-footer { .menu-footer {
position: fixed; position: relation;
height: 30px; height: 30px;
bottom: 10px;
right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@@ -373,6 +380,10 @@ const gotoTag = (t) => {
background-color: var(--background-color-blur); background-color: var(--background-color-blur);
} }
.menu-content {
border-radius: 20px;
}
.slide-enter-active, .slide-enter-active,
.slide-leave-active { .slide-leave-active {
transition: transition: