From 2a6e698af5f0c8eb2299ea54d72279533f86c643 Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Thu, 14 Mar 2024 12:20:32 +0100 Subject: [PATCH 1/4] Persist state of left sidebar --- .../enhancement-remember-left-nav-bar-state | 7 +++++++ packages/web-runtime/src/layouts/Application.vue | 11 ++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 changelog/unreleased/enhancement-remember-left-nav-bar-state diff --git a/changelog/unreleased/enhancement-remember-left-nav-bar-state b/changelog/unreleased/enhancement-remember-left-nav-bar-state new file mode 100644 index 00000000000..04a08061a41 --- /dev/null +++ b/changelog/unreleased/enhancement-remember-left-nav-bar-state @@ -0,0 +1,7 @@ +Enhancement: Remember left nav bar state + +We've implemented a feature to remember the state of the left navbar. Now, when the user reopens the web application, +the navbar will remain in its last state, either fully open or collapsed, +based on the user's previous interaction with it. + +https://github.com/owncloud/web/issues/9613: diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue index acdeaf4f69a..8d811fd3b74 100644 --- a/packages/web-runtime/src/layouts/Application.vue +++ b/packages/web-runtime/src/layouts/Application.vue @@ -15,7 +15,7 @@ v-if="isSidebarVisible" class="app-navigation" :nav-items="navItems" - :closed="navBarClosed" + :closed="localStorageNavBarClosed" @update:nav-bar-closed="setNavBarClosed" /> @@ -45,7 +45,8 @@ import { AppLoadingSpinner, useAppsStore, useAuthStore, - useExtensionRegistry + useExtensionRegistry, + useLocalStorage } from '@ownclouders/web-pkg' import TopBar from '../components/Topbar/TopBar.vue' import MessageBar from '../components/MessageBar.vue' @@ -163,9 +164,9 @@ export default defineComponent({ return unref(navItems).length && !unref(isMobileWidth) }) - const navBarClosed = ref(false) + const localStorageNavBarClosed = useLocalStorage(`oc_NavBarClosed`, false) const setNavBarClosed = (value: boolean) => { - navBarClosed.value = value + localStorageNavBarClosed.value = value } return { @@ -175,7 +176,7 @@ export default defineComponent({ navItems, onResize, isMobileWidth, - navBarClosed, + localStorageNavBarClosed, setNavBarClosed } }, From b6370bb8bdcf9b69fa64e2b39aff6cddd74628b1 Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Thu, 14 Mar 2024 12:21:16 +0100 Subject: [PATCH 2/4] Enhance changelog item --- changelog/unreleased/enhancement-remember-left-nav-bar-state | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/changelog/unreleased/enhancement-remember-left-nav-bar-state b/changelog/unreleased/enhancement-remember-left-nav-bar-state index 04a08061a41..71d31a33c47 100644 --- a/changelog/unreleased/enhancement-remember-left-nav-bar-state +++ b/changelog/unreleased/enhancement-remember-left-nav-bar-state @@ -4,4 +4,5 @@ We've implemented a feature to remember the state of the left navbar. Now, when the navbar will remain in its last state, either fully open or collapsed, based on the user's previous interaction with it. -https://github.com/owncloud/web/issues/9613: +https://github.com/owncloud/web/pull/10611 +https://github.com/owncloud/web/issues/9613 From e6f1c8fdb38aef810590f29873e272fc23e97a68 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 14 Mar 2024 13:44:36 +0100 Subject: [PATCH 3/4] Update packages/web-runtime/src/layouts/Application.vue Co-authored-by: Benedikt Kulmann --- packages/web-runtime/src/layouts/Application.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue index 8d811fd3b74..4d8d92bc11f 100644 --- a/packages/web-runtime/src/layouts/Application.vue +++ b/packages/web-runtime/src/layouts/Application.vue @@ -164,7 +164,7 @@ export default defineComponent({ return unref(navItems).length && !unref(isMobileWidth) }) - const localStorageNavBarClosed = useLocalStorage(`oc_NavBarClosed`, false) + const localStorageNavBarClosed = useLocalStorage(`oc_navBarClosed`, false) const setNavBarClosed = (value: boolean) => { localStorageNavBarClosed.value = value } From bf2eea9876bf0de8f952b1a202e8b3ccbaa2dace Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Thu, 14 Mar 2024 13:50:14 +0100 Subject: [PATCH 4/4] React on code review --- packages/web-runtime/src/layouts/Application.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue index 4d8d92bc11f..c1375fd56fc 100644 --- a/packages/web-runtime/src/layouts/Application.vue +++ b/packages/web-runtime/src/layouts/Application.vue @@ -15,7 +15,7 @@ v-if="isSidebarVisible" class="app-navigation" :nav-items="navItems" - :closed="localStorageNavBarClosed" + :closed="navBarClosed" @update:nav-bar-closed="setNavBarClosed" /> @@ -164,9 +164,9 @@ export default defineComponent({ return unref(navItems).length && !unref(isMobileWidth) }) - const localStorageNavBarClosed = useLocalStorage(`oc_navBarClosed`, false) + const navBarClosed = useLocalStorage(`oc_navBarClosed`, false) const setNavBarClosed = (value: boolean) => { - localStorageNavBarClosed.value = value + navBarClosed.value = value } return { @@ -176,7 +176,7 @@ export default defineComponent({ navItems, onResize, isMobileWidth, - localStorageNavBarClosed, + navBarClosed, setNavBarClosed } },