Moving the Account icon in a drawer

This commit is contained in:
Eric van der Vlist 2023-03-10 20:01:40 +01:00
parent 4ff760a0ff
commit 3aa96c7afc
5 changed files with 48 additions and 7 deletions

View File

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

View File

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

View File

@ -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;

View File

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