diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index fd334fe1..95492a03 100644
--- a/src/_locales/cmn-CN.yml
+++ b/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: 主题
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index ad600aaf..9a61eff2 100644
--- a/src/_locales/cmn-TW.yml
+++ b/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: 主題
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 506abe12..ec394414 100644
--- a/src/_locales/en.yml
+++ b/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
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index c0eb9c88..44d546ac 100644
--- a/src/_locales/jyut.yml
+++ b/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: 色系
diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
index 3e236d27..3007f0bf 100644
--- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
+++ b/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) {
+
+
+
+
+
+
+
+
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/SideBar/SideBar.vue
similarity index 62%
rename from src/components/RightSideButtons/RightSideButtons.vue
rename to src/components/SideBar/SideBar.vue
index 20e93ba1..7633c515 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/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(false)
const hoveringDockItem = reactive({
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
+}