import React from 'react';
-import { Container, Navbar } from 'react-bootstrap';
+import { Button, Container, Navbar } from 'react-bootstrap';
import AutoTracking from './AutoTracking';
+import ConfigDialog from './ConfigDialog';
import ToggleIcon from './ToggleIcon';
+import Icon from '../common/Icon';
import { useTracker } from '../../hooks/tracker';
const mapWild = {
};
const Toolbar = () => {
+ const [showConfigDialog, setShowConfigDialog] = React.useState(false);
const { config, saveConfig } = useTracker();
const controller = React.useMemo(() => ({
return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
<Container fluid>
<div className="button-bar">
+ <Button
+ className="me-3"
+ onClick={() => setShowConfigDialog(true)}
+ variant="outline-secondary"
+ >
+ <Icon.SETTINGS />
+ </Button>
<ToggleIcon controller={controller} icons={['map']} />
<ToggleIcon controller={controller} icons={['compass']} />
<ToggleIcon controller={controller} icons={['small-key']} />
</div>
<AutoTracking />
</Container>
+ <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
</Navbar>;
};