[WIP] Update

src/Components/Excalidraw/Sidebar/General.tsx

@@ -1,7 +1,11 @@
 import { FC } from 'react';
-import { Button, SidebarHeader } from '@/Components/Utilities';
+import { Sidebar } from '@excalidraw/excalidraw';
 import { z } from 'zod';
-import SidebarProviderBase, { SidebarBasePropsSchema } from './Base';
+import SidebarBase, { SidebarBasePropsSchema } from './Base';
+import { Switch, FormControlLabel, FormGroup } from '@mui/material';
+import { useAtom } from 'jotai';
+import { LoggerStateAtom } from '@/atoms/debug';
+import { useTranslation } from 'react-i18next';
 
 export type GeneralSidebarProps = z.infer<typeof GeneralSidebarPropsSchema>;
 
@@ -10,11 +14,24 @@ export const GeneralSidebarPropsSchema = z
   .merge(SidebarBasePropsSchema);
 
 const GeneralSidebar: FC<GeneralSidebarProps> = (props) => {
+  const { t } = useTranslation();
+  const [loggerState, setLoggerState] = useAtom(LoggerStateAtom);
+
   return (
-    <SidebarProviderBase onClose={props.onClose}>
-      <SidebarHeader>General Settings</SidebarHeader>
-      <Button>Button</Button>
-    </SidebarProviderBase>
+    <SidebarBase onClose={props.onClose}>
+      <Sidebar.Header>{t('general-settings')}</Sidebar.Header>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={loggerState}
+              onChange={(e) => setLoggerState?.(e.target.checked)}
+            />
+          }
+          label={t('toggle-debug-mode')}
+        />
+      </FormGroup>
+    </SidebarBase>
   );
 };