From 3aa96c7afca523a82f5a5ea36f705ebf6e322570 Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Fri, 10 Mar 2023 20:01:40 +0100
Subject: [PATCH] Moving the Account icon in a drawer

---
 src/components/account/Account.tsx            | 18 ++++++++---
 src/components/map/Map.tsx                    |  5 +--
 .../SystemDrawer.module.css}                  |  0
 src/components/system-drawer/SystemDrawer.tsx | 31 +++++++++++++++++++
 src/components/system-drawer/index.ts         |  1 +
 5 files changed, 48 insertions(+), 7 deletions(-)
 rename src/components/{account/Account.module.css => system-drawer/SystemDrawer.module.css} (100%)
 create mode 100644 src/components/system-drawer/SystemDrawer.tsx
 create mode 100644 src/components/system-drawer/index.ts

diff --git a/src/components/account/Account.tsx b/src/components/account/Account.tsx
index ab3aac4..7df11f6 100644
--- a/src/components/account/Account.tsx
+++ b/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}>
-        <IconButton onClick={handleClickOpen}>
-          <PersonIcon />
-        </IconButton>
-      </div>
+      <ListItem>
+        <ListItemButton onClick={handleClickOpen}>
+          <ListItemIcon>
+            <PersonIcon />
+          </ListItemIcon>
+          <ListItemText>Account</ListItemText>
+        </ListItemButton>
+      </ListItem>
+
       <Dialog
         open={open()}
         title={t('account')}
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 96b514a..720a669 100644
--- a/src/components/map/Map.tsx
+++ b/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>
diff --git a/src/components/account/Account.module.css b/src/components/system-drawer/SystemDrawer.module.css
similarity index 100%
rename from src/components/account/Account.module.css
rename to src/components/system-drawer/SystemDrawer.module.css
diff --git a/src/components/system-drawer/SystemDrawer.tsx b/src/components/system-drawer/SystemDrawer.tsx
new file mode 100644
index 0000000..ddc011b
--- /dev/null
+++ b/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;
diff --git a/src/components/system-drawer/index.ts b/src/components/system-drawer/index.ts
new file mode 100644
index 0000000..41bc371
--- /dev/null
+++ b/src/components/system-drawer/index.ts
@@ -0,0 +1 @@
+export { default } from './SystemDrawer';