Keep the sidebar opened or closed on reload

Previously, going to a full-width page and heading back to the terminal would default the sidebar to its opened state regardless of what it was before.

Now it stores it in the GameRoot's state and also in the Settings so
that it persists over reloads.

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>
             ) : (