From 1c8d23544a7b1948dbb3c930c70990acb1496268 Mon Sep 17 00:00:00 2001
From: NINE <99791512+NINE-J@users.noreply.github.com>
Date: Sat, 14 Mar 2026 03:04:47 +0900
Subject: [PATCH] style: Resolve nested scrollbars & implement auto-hiding
 navigation for Tutorial UX

---
 frontend/src/components/Sidebar.vue | 57 +++++++++++++++++++++++++++--
 frontend/src/pages/TutorialView.vue | 16 ++++++--
 2 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index fc38d2216..c794029f5 100755
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -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 {
diff --git a/frontend/src/pages/TutorialView.vue b/frontend/src/pages/TutorialView.vue
index a8ece68c7..0551ad9c2 100755
--- a/frontend/src/pages/TutorialView.vue
+++ b/frontend/src/pages/TutorialView.vue
@@ -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%);