Merge pull request #2672 from MartinFournier/fix/sidebar-stays-collapsed

Keep the sidebar opened or closed on reload

src/Settings/Settings.ts

@@ -142,6 +142,11 @@ interface IDefaultSettings {
    * Character overview settings
    */
   overview: OverviewSettings;
+
+  /**
+   *  If the game's sidebar is opened
+   */
+  IsSidebarOpened: boolean;
 }
 
 /**
@@ -194,6 +199,7 @@ export const defaultSettings: IDefaultSettings = {
   SuppressSavedGameToast: false,
   UseIEC60027_2: false,
   ExcludeRunningScriptsFromSave: false,
+  IsSidebarOpened: true,
 
   theme: defaultTheme,
   styles: defaultStyles,
@@ -231,6 +237,8 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
   SuppressSavedGameToast: defaultSettings.SuppressSavedGameToast,
   UseIEC60027_2: defaultSettings.UseIEC60027_2,
   ExcludeRunningScriptsFromSave: defaultSettings.ExcludeRunningScriptsFromSave,
+  IsSidebarOpened: defaultSettings.IsSidebarOpened,
+
   MonacoTheme: "monokai",
   MonacoInsertSpaces: false,
   MonacoFontSize: 20,

src/Sidebar/ui/SidebarRoot.tsx

@@ -106,6 +106,8 @@ interface IProps {
   player: IPlayer;
   router: IRouter;
   page: Page;
+  opened: boolean;
+  onToggled: (newValue: boolean) => void;
 }
 
 export function SidebarRoot(props: IProps): React.ReactElement {
@@ -337,8 +339,13 @@ export function SidebarRoot(props: IProps): React.ReactElement {
   }, []);
 
   const classes = useStyles();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(props.opened);
   const toggleDrawer = (): void => setOpen((old) => !old);
+
+  useEffect(() => {
+    props.onToggled(open);
+  }, [open]);
+
   return (
     <Drawer open={open} anchor="left" variant="permanent">
       <ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>

src/ui/GameRoot.tsx

@@ -78,6 +78,7 @@ import { Context } from "./Context";
 import { RecoveryMode, RecoveryRoot } from "./React/RecoveryRoot";
 import { AchievementsRoot } from "../Achievements/AchievementsRoot";
 import { ErrorBoundary } from "./ErrorBoundary";
+import { Settings } from "../Settings/Settings";
 
 const htmlLocation = location;
 
@@ -220,6 +221,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
 
   const [cinematicText, setCinematicText] = useState("");
   const [errorBoundaryKey, setErrorBoundaryKey] = useState<number>(0);
+  const [sidebarOpened, setSideBarOpened] = useState(Settings.IsSidebarOpened);
 
   function resetErrorBoundary(): void {
     setErrorBoundaryKey(errorBoundaryKey + 1);
@@ -517,7 +519,12 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
             </Overview>
             {withSidebar ? (
               <Box display="flex" flexDirection="row" width="100%">
-                <SidebarRoot player={player} router={Router} page={page} />
+                <SidebarRoot player={player} router={Router} page={page}
+                  opened={sidebarOpened}
+                  onToggled={(isOpened) => {
+                    setSideBarOpened(isOpened);
+                    Settings.IsSidebarOpened = isOpened;
+                  }} />
                 <Box className={classes.root}>{mainPage}</Box>
               </Box>
             ) : (