feat: automatically hide the top bar

src/components/Settings/components/General.vue

@@ -77,10 +77,6 @@ watch(() => settings.value.language, (newValue, oldValue) => {
         />
       </SettingsItem>
 
-      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
-        <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
-      </SettingsItem>
-
       <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
         <Select
           v-model="settings.dockPosition"
@@ -97,6 +93,15 @@ watch(() => settings.value.language, (newValue, oldValue) => {
         <Radio v-model="settings.openLinkInCurrentTab" />
       </SettingsItem> -->
     </SettingsItemGroup>
+
+    <SettingsItemGroup title="Top Bar">
+      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+        <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+      </SettingsItem>
+      <SettingsItem title="automatically hide the top bar">
+        <Radio v-model="settings.autoHideTopbar" />
+      </SettingsItem>
+    </SettingsItemGroup>
   </div>
 </template>
 

src/components/Topbar/Topbar.vue

@@ -5,6 +5,8 @@ import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
 import { settings } from '~/logic'
+import emitter from '~/utils/mitt'
+import type { AppPage } from '~/enums/appEnums'
 
 interface Props {
   showSearchBar?: boolean
@@ -17,9 +19,14 @@ const props = withDefaults(defineProps<Props>(), {
   showLogo: true,
 })
 
+const activatedPage = inject('activatedPage') as Ref<AppPage>
+
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | {}>({}) as UnwrapNestedRefs<UserInfo>
 
+const hideTopbar = ref<boolean>(false)
+const hovingTopbar = ref<boolean>(false)
+
 const showChannelsPop = ref<boolean>(false)
 const showUserPanelPop = ref<boolean>(false)
 const showNotificationsPop = ref<boolean>(false)
@@ -77,8 +84,18 @@ watch(showFavoritesPop, (newVal, oldVal) => {
   }
 })
 
+watch(activatedPage, () => {
+  hideTopbar.value = false
+  emitter.emit('topbarVisibleChange', true)
+})
+
 onMounted(() => {
   initData()
+  window.addEventListener('wheel', handleScroll)
+})
+
+onBeforeMount(() => {
+  window.removeEventListener('wheel', handleScroll)
 })
 
 async function initData() {
@@ -93,6 +110,23 @@ async function initData() {
   }, updateInterval)
 }
 
+// Function to handle the wheel event with type annotation for the event parameter
+function handleScroll(event: WheelEvent): void {
+  hideTopbar.value = false
+
+  if (settings.value.autoHideTopbar && !hovingTopbar.value) {
+    if (event.deltaY < 0) {
+      hideTopbar.value = false
+      emitter.emit('topbarVisibleChange', true)
+    }
+
+    else {
+      hideTopbar.value = true
+      emitter.emit('topbarVisibleChange', false)
+    }
+  }
+}
+
 function showLogoMenuDropdown() {
   logo.value.classList.add('activated')
   showChannelsPop.value = true
@@ -193,7 +227,10 @@ async function getTopbarNewMomentsCount() {
 
 <template>
   <header
-    w="full"
+    w="full" transition="all 300 ease-in-out"
+    :class="{ hide: hideTopbar }"
+    @mouseenter="hovingTopbar = true"
+    @mouseleave="hovingTopbar = false"
   >
     <main
       max-w="$bew-page-max-width" m-auto flex="~"
@@ -543,6 +580,10 @@ async function getTopbarNewMomentsCount() {
   --at-apply: opacity-0;
 }
 
+.hide {
+  transform: translateY(-100%);
+}
+
 .bew-popover {
   --at-apply: absolute top-60px left-1/2
     transform -translate-x-1/2