diff --git a/src/App.vue b/src/App.vue index fd51520e..02828a4e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,6 +8,7 @@ :class="{ showAltNP: settings.use_sidebar && settings.use_alt_np, disableSidebar: !settings.use_sidebar, + extendWidth: settings.extend_width, isSmall: !xl, }" > diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss index bbbb5a89..c8aa9046 100644 --- a/src/assets/scss/Global/app-grid.scss +++ b/src/assets/scss/Global/app-grid.scss @@ -7,13 +7,17 @@ "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content bottombar"; - max-width: 1720px; height: calc(100vh); - margin: 0 auto; gap: 1rem; + padding: $small 0; + margin: 0 auto; + margin-top: -$small; + max-width: 1720px; +} + +#app-grid.extendWidth { padding-right: $medium; border-right: solid 1px $gray4; - margin-top: -$small; padding-top: $small; } diff --git a/src/components/SettingsView/Group.vue b/src/components/SettingsView/Group.vue index 6301b318..ab549041 100644 --- a/src/components/SettingsView/Group.vue +++ b/src/components/SettingsView/Group.vue @@ -70,6 +70,7 @@ defineProps<{ .title { margin: auto 0; user-select: none; + cursor: pointer; } } } diff --git a/src/settings/general/extend-width.ts b/src/settings/general/extend-width.ts new file mode 100644 index 00000000..d296588a --- /dev/null +++ b/src/settings/general/extend-width.ts @@ -0,0 +1,13 @@ +import { Setting, SettingType } from "@/interfaces/settings"; +import useSettingsStore from "@/stores/settings"; + +const settings = useSettingsStore; + +const extend_to_full_width: Setting = { + title: "Extend app to full screen width", + type: SettingType.switch, + source: () => settings().extend_width, + action: () => settings().toggleExtendWidth(), +}; + +export default [extend_to_full_width]; diff --git a/src/settings/general/index.ts b/src/settings/general/index.ts index 9f9459df..008408c5 100644 --- a/src/settings/general/index.ts +++ b/src/settings/general/index.ts @@ -1,12 +1,13 @@ import { SettingCategory } from "@/interfaces/settings"; import nowPlaying from "./now-playing"; import sidebarSettings from "./sidebar"; +import extendWidth from "./extend-width"; export default { title: "General", groups: [ { - settings: [...sidebarSettings, ...nowPlaying], + settings: [...sidebarSettings, ...nowPlaying, ...extendWidth], }, ], } as SettingCategory; diff --git a/src/stores/settings/index.ts b/src/stores/settings/index.ts index 7ab14495..415fd242 100644 --- a/src/stores/settings/index.ts +++ b/src/stores/settings/index.ts @@ -4,6 +4,7 @@ export default defineStore("settings", { state: () => ({ use_alt_np: false, use_sidebar: true, + extend_width: false, }), actions: { toggleUseRightNP() { @@ -13,6 +14,9 @@ export default defineStore("settings", { toggleDisableSidebar() { this.use_sidebar = !this.use_sidebar; }, + toggleExtendWidth() { + this.extend_width = !this.extend_width; + }, }, getters: { show_alt_np(): boolean {