github/ChatDev
1
0
Fork 0
mirror of https://github.com/OpenBMB/ChatDev.git synced 2026-04-25 11:18:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Resolve nested scrollbars & implement auto-hiding navigation for Tutorial UX

Browse Source
This commit is contained in:
NINE 2026-03-14 03:04:47 +09:00
parent 980f6249fa
commit 1c8d23544a
2 changed files with 66 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/Sidebar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="sidebar">
<div class="sidebar" :class="{ 'is-hidden': isHidden }" @mouseenter="isHidden = false">
<nav class="sidebar-nav">
<router-link to="/">Home</router-link>
@ -20,6 +20,7 @@
</button>
</div>
</div>
<div class="sidebar-hit-area" v-if="isHidden" @mouseenter="isHidden = false"></div>
<SettingsModal
:is-visible="showSettingsModal"
@update:is-visible="showSettingsModal = $event"
@ -28,21 +29,53 @@
<script setup>
import { RouterLink, useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
import SettingsModal from './SettingsModal.vue'
const showSettingsModal = ref(false)
const isHidden = ref(false)
watch(isHidden, (val) => {
if (val) {
document.body.classList.add('nav-hidden')
} else {
document.body.classList.remove('nav-hidden')
}
})
const route = useRoute()
const isWorkflowsActive = computed(() => route.path.startsWith('/workflows'))
let lastScrollY = 0
const handleScroll = (e) => {
const currentScrollY = e.target.scrollTop || window.scrollY || 0;
// Minimize small scroll jitters
if (Math.abs(currentScrollY - lastScrollY) < 5) return;
// Scrolling down -> hide (if past slight threshold). Scrolling up -> show
if (currentScrollY > lastScrollY && currentScrollY > 10) {
isHidden.value = true;
} else if (currentScrollY < lastScrollY) {
isHidden.value = false;
}
lastScrollY = currentScrollY <= 0 ? 0 : currentScrollY;
}
onMounted(() => {
// Listen to scroll events during the capture phase to track child scrolling (like TutorialView)
window.addEventListener('scroll', handleScroll, true);
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll, true);
document.body.classList.remove('nav-hidden');
})
</script>
<style scoped>
.sidebar {
width: 100%;
background-color: #1a1a1a; /* Dark theme background */
background-color: #1a1a1a;
padding: 0 24px 0 0;
box-sizing: border-box;
display: flex;
@ -52,8 +85,24 @@ const isWorkflowsActive = computed(() => route.path.startsWith('/workflows'))
top: 0;
z-index: 100;
border-bottom: 1px solid #4d4d4d;
position: relative; /* For absolute positioning of actions */
justify-content: center;
transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 0;
transform: translateY(0);
}
.sidebar.is-hidden {
margin-top: -55px;
transform: translateY(-100%);
}
.sidebar-hit-area {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 25px;
z-index: 99;
}
.sidebar-actions {

16
frontend/src/pages/TutorialView.vue
View File

@ -128,26 +128,36 @@ onMounted(() => {
width: 100%;
max-width: 100%;
margin: 0 auto;
height: 100vh;
height: calc(100vh - 55px); /* Adjust the height of the .sidebar */
background: linear-gradient(135deg, #232526 0%, #1e1e1e 100%);
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Glowing border and card shadow */
border-radius: 18px;
box-shadow: 0 4px 32px 0 rgba(0, 255, 255, 0.08), 0 0 0 2px #00eaff33;
border: 1.5px solid #00eaff33;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
scroll-behavior: smooth;
}
:global(body.nav-hidden .tutorial-view) {
height: 100vh;
}
.lang-switch {
position: absolute;
top: 80px; /* Move down from 32px to 80px */
top: 80px; /* 55px nav + 25px spacing */
right: 48px;
z-index: 10;
display: flex;
gap: 12px;
transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:global(body.nav-hidden .lang-switch) {
top: 25px; /* Adjust to 25px spacing from top of screen when nav is hidden */
}
.lang-switch button {
background: linear-gradient(90deg, #232526 60%, #00eaff22 100%);