Moving the Account icon in a drawer

src/components/account/Account.tsx

@@ -9,6 +9,10 @@ import {
   DialogActions,
   IconButton,
   InputLabel,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
   NativeSelect,
   TextField,
 } from '@suid/material';
@@ -123,11 +127,15 @@ const Account: Component<{}> = (props) => {
 
   return (
     <>
-      <div class={style.control}>
+      <ListItem>
-        <IconButton onClick={handleClickOpen}>
+        <ListItemButton onClick={handleClickOpen}>
-          <PersonIcon />
+          <ListItemIcon>
-        </IconButton>
+            <PersonIcon />
-      </div>
+          </ListItemIcon>
+          <ListItemText>Account</ListItemText>
+        </ListItemButton>
+      </ListItem>
+
       <Dialog
         open={open()}
         title={t('account')}

src/components/map/Map.tsx

@@ -52,6 +52,7 @@ import Invitation, {
 } from '../invitation';
 import { returnOrUpdate } from 'ol/extent';
 import Updater from '../updater';
+import SystemDrawer from '../system-drawer';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -312,7 +313,7 @@ const Map: Component = () => {
     //<OsmFetch map={getMap} />
     // @ts-ignore
     <div class='ol-map' ref={target}>
-      <Updater/>
+      <Updater />
       <Invitation />
       <Overlays map={getMap} />
       <Note />
@@ -326,7 +327,7 @@ const Map: Component = () => {
       <GpxImport />
       <MapTileProvider />
       <GpxDialog />
-      <Account />
+      <SystemDrawer />
       <AllGpxes map={getMap} />
       <Infos />
     </div>

src/components/system-drawer/SystemDrawer.tsx

@@ -0,0 +1,31 @@
+import { Component, createSignal } from 'solid-js';
+
+import SettingsIcon from '@suid/icons-material/Settings';
+
+import style from './SystemDrawer.module.css';
+import { Drawer, IconButton, List, ListItem } from '@suid/material';
+import Account from '../account';
+
+interface Props {}
+
+const SystemDrawer: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false);
+  return (
+    <>
+      <div class={style.control}>
+        <IconButton onClick={() => setOpen(true)}>
+          <SettingsIcon />
+        </IconButton>
+        <Drawer open={open()} onClose={() => setOpen(false)} anchor='right'>
+          <List>
+            <ListItem>
+              <Account />
+            </ListItem>
+          </List>
+        </Drawer>
+      </div>
+    </>
+  );
+};
+
+export default SystemDrawer;

src/components/system-drawer/index.ts

@@ -0,0 +1 @@
+export { default } from './SystemDrawer';