fix: that the reset context menu option reset resizable sidebar width to the localStorage value rather than the default value

components/UserInterface/ResizableSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
-				'width': props.width,
+				'width': storedWidth ? `${storedWidth}px` : props.width,
 				'min-width': props.minWidth,
 				'max-width': props.maxWidth,
 				'border': props.borderSides == 'all' ? borderStyling : undefined,
@@ -29,12 +29,15 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
+const storedWidth = ref<number>();
 
 const menuItems: ContextMenuItem[] = [
 	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
 ]
 
 onMounted(() => {
+	loadStoredWidth();
+
 	if (resizableSidebar.value && widthResizer.value) {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
 			e.preventDefault();
@@ -76,6 +79,21 @@ onMounted(() => {
 	}
 });
 
+onActivated(() => {
+	console.log("[res] activated");
+	loadStoredWidth();
+});
+
+function loadStoredWidth() {
+	if (props.localStorageName) {
+		const storedWidthValue = localStorage.getItem(props.localStorageName);
+		if (storedWidthValue) {
+			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			console.log("[res] loaded stored width");
+		}
+	}
+}
+
 </script>
 
 <style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -1,8 +1,7 @@
 <template>
 	<NuxtLayout name="client">
 		<ResizableSidebar
-				:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
+				width="14rem" min-width="5rem" max-width="30rem"
-				min-width="5rem" max-width="30rem"
 				border-sides="right" :local-storage-name="middleLeftColumnName">
 			<div id="middle-left-column" class="main-grid-row">
 				<div id="server-name-container">
@@ -21,8 +20,7 @@
 		</ResizableSidebar>
 		<MessageArea :channel-url="channelUrlPath" />
 		<ResizableSidebar
-				:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
+				width="14rem" min-width="5.5rem" max-width="30rem"
-				min-width="5.5rem" max-width="30rem"
 				border-sides="left" :local-storage-name="membersContainername">
 			<div id="members-container">
 				<div id="members-list">
@@ -77,8 +75,6 @@ onMounted(async () => {
 
 onActivated(async () => {
 	console.log("activating");
-	loadSidebarWidths();
-	console.log("loaded sidebar widths");
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
 	console.log("fetched guild");
@@ -95,18 +91,6 @@ async function setArrayVariables() {
 	console.log("channel:", channel.value);
 }
 
-function loadSidebarWidths() {
-	const channelsListWidth = localStorage.getItem(middleLeftColumnName);
-	if (channelsListWidth) {
-		middleLeftColumnWidth.value = parseInt(channelsListWidth) || undefined;
-	}
-
-	const membersListWidth = localStorage.getItem(membersContainername);
-	if (membersListWidth) {
-		membersContainerWidth.value = parseInt(membersListWidth) || undefined;
-	}
-}
-
 function toggleGuildSettings(e: Event) {
 	e.preventDefault();
 	showGuildSettings.value = !showGuildSettings.value;