simple tracker config dialog

[alttp.git] / resources / js / components / tracker / Toolbar.js

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
index c7545b3106c0898afe0ed8224a78fe7b91ce4c85..020826635a65a215fa89bf452c81d5af58734a61 100644 (file)
--- a/resources/js/components/tracker/Toolbar.js
+++ b/resources/js/components/tracker/Toolbar.js
@@ -1,8 +1,10 @@
 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 = {
@@ -13,6 +15,7 @@ const mapWild = {
 };
 
 const Toolbar = () => {
+       const [showConfigDialog, setShowConfigDialog] = React.useState(false);
        const { config, saveConfig } = useTracker();
 
        const controller = React.useMemo(() => ({
@@ -28,6 +31,13 @@ const Toolbar = () => {
        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']} />
@@ -35,6 +45,7 @@ const Toolbar = () => {
                        </div>
                        <AutoTracking />
                </Container>
+               <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
        </Navbar>;
 };