From 9e03e30bd85f362d6f201d362c9c8b2a84fcf3d3 Mon Sep 17 00:00:00 2001
From: Fahid Latheef Alungal <fahideng@gmail.com>
Date: Sat, 25 Jan 2025 11:15:48 +0530
Subject: [PATCH] ui: added persistent Sidebar Collapsibility and Sidebar
 Webpages

---
 frontend/src/components/AppSidebar.vue | 19 +++++++++++++++----
 frontend/src/stores/sidebar.js         | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index c864038f..72883bb1 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -23,7 +23,7 @@
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
 					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
-					@click="showWebPages = !showWebPages"
+					@click="toggleWebPages"
 				>
 					<div
 						v-if="!sidebarStore.isSidebarCollapsed"
@@ -32,7 +32,7 @@
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
 								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': showWebPages }"
+								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
 							/>
 						</span>
 						<span class="ml-2">
@@ -48,7 +48,7 @@
 				<div
 					v-if="sidebarSettings.data?.web_pages?.length"
 					class="flex flex-col transition-all duration-300 ease-in-out"
-					:class="showWebPages ? 'block' : 'hidden'"
+					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
 				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
@@ -114,7 +114,6 @@ const showPageModal = ref(false)
 const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
-const showWebPages = ref(false)
 const settingsStore = useSettings()
 
 onMounted(() => {
@@ -266,5 +265,17 @@ watch(userResource, () => {
 
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+	localStorage.setItem(
+		'isSidebarCollapsed',
+		JSON.stringify(sidebarStore.isSidebarCollapsed)
+	)
+}
+
+const toggleWebPages = () => {
+	sidebarStore.isWebpagesCollapsed = !sidebarStore.isWebpagesCollapsed
+	localStorage.setItem(
+		'isWebpagesCollapsed',
+		JSON.stringify(sidebarStore.isWebpagesCollapsed)
+	)
 }
 </script>
diff --git a/frontend/src/stores/sidebar.js b/frontend/src/stores/sidebar.js
index 224816f2..f7faa9f5 100644
--- a/frontend/src/stores/sidebar.js
+++ b/frontend/src/stores/sidebar.js
@@ -3,8 +3,22 @@ import { ref } from 'vue'
 
 export const useSidebar = defineStore('sidebar', () => {
 	const isSidebarCollapsed = ref(false)
+	const isWebpagesCollapsed = ref(true)
+
+	if (localStorage.getItem('isSidebarCollapsed')) {
+		isSidebarCollapsed.value = JSON.parse(
+			localStorage.getItem('isSidebarCollapsed')
+		)
+	}
+
+	if (localStorage.getItem('isWebpagesCollapsed')) {
+		isWebpagesCollapsed.value = JSON.parse(
+			localStorage.getItem('isWebpagesCollapsed')
+		)
+	}
 
 	return {
 		isSidebarCollapsed,
+		isWebpagesCollapsed,
 	}
 })