feat(settings): auto hide sidebar

src/_locales/cmn-CN.yml

@@ -40,6 +40,12 @@ common:
     remark: 备注
     operations: 操作
 
+  position:
+    left: 左侧
+    right: 右侧
+    top: 顶部
+    bottom: 底部
+
 iframe_drawer:
   open_in_new_tab: 在新标签页打开
   close: 关闭
@@ -62,6 +68,8 @@ settings:
   group_performance: 毛玻璃和性能
   group_topbar: 顶栏
   group_dock: Dock 栏
+  group_sidebar: 侧边栏
+  group_sidebar_desc: 位于主页以外的页面右侧或左侧，通常有亮/暗模式切换按钮和设置按钮。
   group_color: 颜色
   group_wallpaper: 背景图片
   group_logo: LOGO
@@ -122,15 +130,13 @@ settings:
     none: 不显示
   dock_position: Dock 栏位置
   dock_position_desc: 在屏幕中摆放位置。
-  dock_position_opt:
-    left: 左侧
-    right: 右侧
-    bottom: 底部
   auto_hide_dock: 自动隐藏 Dock 栏
   dock_content_adjustment: Dock 内容调整
   dock_content_adjustment_desc: 第一个激活的 Dock 项的页面将会是启动页面。
   disable_light_dark_mode_switcher: 禁用亮/暗色模式切换按钮
   move_back_to_top_and_refresh_to_dock: 将返回顶部和刷新按钮移动到 Dock 栏
+  sidebar_position: 侧边栏位置
+  auto_hide_sidebar: 自动隐藏侧边栏
 
   # Appearance
   theme: 主题

src/_locales/cmn-TW.yml

@@ -40,6 +40,12 @@ common:
     remark: 備註
     operations: 操作
 
+  position:
+    left: 左側
+    right: 右側
+    top: 頂部
+    bottom: 底部
+
 iframe_drawer:
   open_in_new_tab: 在新索引標籤開啟連結
   close: 關閉
@@ -62,6 +68,8 @@ settings:
   group_performance: 毛玻璃與效能
   group_topbar: 頂欄
   group_dock: Dock
+  group_sidebar: 側邊欄
+  group_sidebar_desc: 位於首頁以外的頁面右側或左側，通常有淺/深色模式切換按鈕和設定按鈕。
   group_color: 顏色
   group_wallpaper: 背景圖片
   group_logo: LOGO
@@ -122,15 +130,13 @@ settings:
     none: 不顯示
   dock_position: Dock 位置
   dock_position_desc: 螢幕上的位置。
-  dock_position_opt:
-    left: 左側
-    right: 右側
-    bottom: 底部
   auto_hide_dock: 自動隱藏 Dock
   dock_content_adjustment: Dock 內容調整
   dock_content_adjustment_desc: 第一個啟用的 Dock 項目的頁面將是起始頁面。
   disable_light_dark_mode_switcher: 關閉淺/深色模式切換按鈕
   move_back_to_top_and_refresh_to_dock: 將返回頂部和重新整理按鈕移動到 Dock
+  sidebar_position: 側邊欄位置
+  auto_hide_sidebar: 自動隱藏側邊欄
 
   # Appearance
   theme: 主題

src/_locales/en.yml

@@ -40,6 +40,12 @@ common:
     remark: Remark
     operations: Operations
 
+  position:
+    left: Left
+    right: Right
+    top: Top
+    bottom: Bottom
+
 iframe_drawer:
   open_in_new_tab: Open in new tab
   close: Close
@@ -62,6 +68,8 @@ settings:
   group_performance: Frosted Glass & Performance
   group_topbar: Top Bar
   group_dock: Dock
+  group_sidebar: Sidebar
+  group_sidebar_desc: Located on the right or left side of pages other than the homepage, typically includes a light/dark mode toggle button and settings button.
   group_color: Color
   group_wallpaper: Wallpaper
   group_logo: LOGO
@@ -122,15 +130,13 @@ settings:
     none: Do not show
   dock_position: Dock position
   dock_position_desc: Position on screen.
-  dock_position_opt:
-    left: Left
-    right: Right
-    bottom: Bottom
   auto_hide_dock: Automatically hide the dock
   dock_content_adjustment: Dock content adjustment
   dock_content_adjustment_desc: The page of the first activated dock item will be the startup page.
   disable_light_dark_mode_switcher: Disable light/dark mode switcher
   move_back_to_top_and_refresh_to_dock: Move the back-to-top and refresh buttons to the dock
+  sidebar_position: Sidebar position
+  auto_hide_sidebar: Automatically hide the sidebar
 
   # Appearance
   theme: Theme

src/_locales/jyut.yml

@@ -40,6 +40,12 @@ common:
     remark: 備註
     operations: 操作
 
+  position:
+    left: 左邊
+    right: 右邊
+    top: 上頭
+    bottom: 下低
+
 iframe_drawer:
   open_in_new_tab: 喺新嘅分頁度打開連結
   close: 關閉
@@ -62,6 +68,8 @@ settings:
   group_performance: 毛玻璃同效能
   group_topbar: 頂部欄
   group_dock: Dock
+  group_sidebar: 側邊欄
+  group_sidebar_desc: 喺主頁以外嘅頁面嘅右邊或左邊，通常有淺/深色模式切換掣同設定掣。
   group_color: 顏色
   group_wallpaper: 背景圖片
   group_logo: LOGO
@@ -122,15 +130,13 @@ settings:
     none: 唔顯示
   dock_position: Dock 放位
   dock_position_desc: 放喺螢幕邊度。
-  dock_position_opt:
-    left: 左邊
-    right: 右邊
-    bottom: 下低
   auto_hide_dock: 自動收埋 Dock
   dock_content_adjustment: Dock 內容調整
   dock_content_adjustment_desc: 第一個啓用嘅 Dock 項個頁面會係開始頁面。
   disable_light_dark_mode_switcher: 閂咗淺/深色主題切換粒掣
   move_back_to_top_and_refresh_to_dock: 將返去頂部同重新整理粒掣擺到落 Dock 度
+  sidebar_position: 側邊欄位置
+  auto_hide_sidebar: 自動收埋側邊欄
 
   # Appearance
   theme: 色系

src/components/Settings/DesktopAndDock/DesktopAndDock.vue

@@ -31,15 +31,15 @@ const topBarIconBadgesOptions = computed(() => {
 const dockPositions = computed(() => {
   return [
     {
-      label: t('settings.dock_position_opt.left'),
+      label: t('common.position.left'),
       value: 'left',
     },
     {
-      label: t('settings.dock_position_opt.right'),
+      label: t('common.position.right'),
       value: 'right',
     },
     {
-      label: t('settings.dock_position_opt.bottom'),
+      label: t('common.position.bottom'),
       value: 'bottom',
     },
   ]
@@ -72,6 +72,19 @@ const pageOptions = computed((): { label: string, icon: string, value: string }[
   })
 })
 
+const sidebarPositions = computed(() => {
+  return [
+    {
+      label: t('common.position.left'),
+      value: 'left',
+    },
+    {
+      label: t('common.position.right'),
+      value: 'right',
+    },
+  ]
+})
+
 function resetDockContent() {
   settings.value.dockItemVisibilityList = mainStore.dockItems.map((e: any) => {
     return {
@@ -161,6 +174,14 @@ function handleToggleDockItem(dockItem: any) {
         <Radio v-model="settings.moveBackToTopOrRefreshButtonToDock" />
       </SettingsItem>
     </SettingsItemGroup>
+    <SettingsItemGroup :title="$t('settings.group_sidebar')" :desc="$t('settings.group_sidebar_desc')">
+      <SettingsItem :title="$t('settings.sidebar_position')">
+        <Select v-model="settings.sidebarPosition" :options="sidebarPositions" w="full" />
+      </SettingsItem>
+      <SettingsItem :title="$t('settings.auto_hide_sidebar')">
+        <Radio v-model="settings.autoHideSidebar" />
+      </SettingsItem>
+    </SettingsItemGroup>
   </div>
 </template>
 

src/components/SideBar/SideBar.vue

@@ -2,25 +2,61 @@
 import { Icon } from '@iconify/vue'
 
 import { useDark } from '~/composables/useDark'
+import { settings } from '~/logic'
 
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
 
 const emit = defineEmits(['settings-visibility-change'])
 const { isDark, toggleDark } = useDark()
+const hideSidebar = ref<boolean>(false)
 
 const hoveringDockItem = reactive<HoveringDockItem>({
   themeMode: false,
   settings: false,
 })
+
+onMounted(() => {
+  if (settings.value.autoHideSidebar)
+    hideSidebar.value = true
+})
+
+function toggleHideSidebar(hide: boolean) {
+  if (settings.value.autoHideSidebar)
+    hideSidebar.value = hide
+  else
+    hideSidebar.value = false
+}
 </script>
 
 <template>
   <div
-    pos="fixed top-0 right-6px" h-full flex items-center z-10
+    :class="{
+      'left-side': settings.sidebarPosition === 'left',
+      'right-side': settings.sidebarPosition === 'right',
+      'hide': hideSidebar,
+    }"
+    pos="fixed top-0" h-full flex items-center z-10
     pointer-events-none
   >
-    <div flex="~ gap-2 col" pointer-events-auto>
+    <!-- Edge Div -->
+    <div
+      v-if="settings.autoHideSidebar && hideSidebar"
+      class="sidebar-edge"
+      :class="`sidebar-edge-${settings.sidebarPosition}`"
+      pointer-events-auto
+      @mouseenter="toggleHideSidebar(false)"
+      @mouseleave="toggleHideSidebar(true)"
+    />
+
+    <div
+      class="sidebar-content"
+      flex="~ gap-2 col"
+      pointer-events-auto
+      duration-300
+      @mouseenter="toggleHideSidebar(false)"
+      @mouseleave="toggleHideSidebar(true)"
+    >
       <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
         <Button
           class="ctrl-btn"
@@ -78,4 +114,32 @@ const hoveringDockItem = reactive<HoveringDockItem>({
     --uno: "w-20px h-20px shrink-0";
   }
 }
+
+.left-side {
+  --uno: "left-6px";
+}
+
+.right-side {
+  --uno: "right-6px";
+}
+
+.sidebar-edge {
+  --uno: "absolute top-0 w-14px h-full hover:w-60px duration-300";
+
+  &-left {
+    --uno: "left-0";
+  }
+
+  &-right {
+    --uno: "right-0";
+  }
+}
+
+.hide.left-side .sidebar-content {
+  --uno: "translate-x--100% opacity-0 pointer-events-none";
+}
+
+.hide.right-side .sidebar-content {
+  --uno: "translate-x-100% opacity-0 pointer-events-none";
+}
 </style>

src/contentScripts/views/App.vue

@@ -321,7 +321,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
         @refresh="handleThrottledPageRefresh"
         @back-to-top="handleThrottledBackToTop"
       />
-      <RightSideButtons
+      <SideBar
         v-else
         pointer-events-auto
         @settings-visibility-change="toggleSettings"

src/logic/storage.ts

@@ -34,6 +34,8 @@ export interface Settings {
   dockItemVisibilityList: { page: AppPage, visible: boolean }[]
   disableLightDarkModeSwitcherOnDock: boolean
   moveBackToTopOrRefreshButtonToDock: boolean
+  sidebarPosition: 'left' | 'right'
+  autoHideSidebar: boolean
 
   theme: 'light' | 'dark' | 'auto'
   themeColor: string
@@ -108,6 +110,8 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   dockItemVisibilityList: [],
   disableLightDarkModeSwitcherOnDock: false,
   moveBackToTopOrRefreshButtonToDock: true,
+  sidebarPosition: 'right',
+  autoHideSidebar: false,
 
   theme: 'auto',
   themeColor: '#00a1d6',