fix: resolve the issue with automatic hiding of top bar...again

src/contentScripts/views/App.vue

@@ -252,12 +252,12 @@ provide('scrollbarRef', scrollbarRef)
   </template>
 
   <div
-    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
-    pos="absolute top-0 left-0" w-full h-full overflow-hidden
+    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" z-60
+    pos="absolute top-0 left-0" w-full h-full
     :style="{ opacity: 1, height: isHomePage() ? '100vh' : '0' }"
   >
     <!-- Dock & RightSideButtons -->
-    <div>
+    <div pos="absolute top-0 left-0" w-inherit h-inherit overflow-hidden>
       <Dock v-if="isHomePage()" :activated-page="activatedPage" @change-page="pageName => changeActivatePage(pageName)" @settings-visibility-change="toggleSettings" />
       <RightSideButtons v-else @settings-visibility-change="toggleSettings" />
     </div>

src/contentScripts/views/Home/Home.vue

@@ -134,7 +134,7 @@ onUnmounted(() => {
       </Transition>
 
       <header
-        pos="sticky top-80px" w-fit z-10 mb-9 transition="all 300 ease-in-out"
+        pos="sticky top-80px" w-fit z-10 mb-9 duration-300 ease-in-out
         :class="{ hide: shouldMoveTabsUp }"
       >
         <ul flex="~ items-center gap-2">
@@ -184,7 +184,7 @@ onUnmounted(() => {
 }
 
 .hide {
-  transform: translateY(-70px);
+  --at-apply: important-translate-y--70px;
 }
 
 .tab-activated {

src/contentScripts/views/Home/components/Ranking.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import type { PgcModel, RankingType, RankingVideoModel } from '../types'
 import { settings } from '~/logic'
+import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
 
@@ -41,6 +42,7 @@ const isLoading = ref<boolean>(false)
 const activatedRankingType = ref<RankingType>({ ...rankingTypes.value[0] })
 const videoList = reactive<RankingVideoModel[]>([])
 const PgcList = reactive<PgcModel[]>([])
+const shouldMoveAsideUp = ref<boolean>(false)
 
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
@@ -52,9 +54,28 @@ watch(() => activatedRankingType.value.id, () => {
 })
 
 onMounted(() => {
+  emitter.on('topbarVisibleChange', (val) => {
+    shouldMoveAsideUp.value = false
+
+    // Allow moving tabs up only when the top bar is not hidden & is set to auto-hide
+    // This feature is primarily designed to compatible with the Bilibili Evolved's top bar
+    // Even when the BewlyBewly top bar is hidden, the Bilibili Evolved top bar still exists, so not moving up
+    if (settings.value.autoHideTopbar && settings.value.isShowTopbar) {
+      if (val)
+        shouldMoveAsideUp.value = false
+
+      else
+        shouldMoveAsideUp.value = true
+    }
+  })
+
   getRankingVideos()
 })
 
+onBeforeUnmount(() => {
+  emitter.off('topbarVisibleChange')
+})
+
 function getRankingVideos() {
   videoList.length = 0
   isLoading.value = true
@@ -86,7 +107,8 @@ function getRankingPgc() {
 <template>
   <div flex="~ gap-40px">
     <aside
-      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0
+      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0 duration-300 ease-in-out
+      :class="{ hide: shouldMoveAsideUp }"
     >
       <OverlayScrollbarsComponent h-inherit p-20px m--20px defer>
         <ul flex="~ col gap-2">
@@ -163,4 +185,8 @@ function getRankingPgc() {
 .active {
   --at-apply: scale-110 bg-$bew-theme-color dark:bg-white text-white dark:text-black shadow-$bew-shadow-2;
 }
+
+.hide {
+  --at-apply: h-[calc(100vh-70)] translate-y--70px;
+}
 </style>