diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-09-06 00:20:27 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-09-06 01:05:24 +0200 |
commit | 13ef6251c688e3139a4f8a7c94ff5dab90719420 (patch) | |
tree | 693e5393c3c792641bda77222818aa3285e8482e /subprojects/frontend/src/TopBar.tsx | |
parent | fix(frontend): Lezer bracket matching (diff) | |
download | refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.tar.gz refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.tar.zst refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.zip |
refactor(frontend): toolbar sm breakpoint
Improve toolbar appearance on small screens
Diffstat (limited to 'subprojects/frontend/src/TopBar.tsx')
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index 4424e6b3..a060ff9e 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -1,10 +1,15 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | 1 | import AppBar from '@mui/material/AppBar'; |
2 | import Toolbar from '@mui/material/Toolbar'; | 2 | import Toolbar from '@mui/material/Toolbar'; |
3 | import Typography from '@mui/material/Typography'; | 3 | import Typography from '@mui/material/Typography'; |
4 | import { useTheme } from '@mui/material/styles'; | ||
5 | import useMediaQuery from '@mui/material/useMediaQuery'; | ||
4 | import { throttle } from 'lodash-es'; | 6 | import { throttle } from 'lodash-es'; |
7 | import { observer } from 'mobx-react-lite'; | ||
5 | import React, { useEffect, useMemo, useState } from 'react'; | 8 | import React, { useEffect, useMemo, useState } from 'react'; |
6 | 9 | ||
10 | import { useRootStore } from './RootStore'; | ||
7 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 11 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
12 | import GenerateButton from './editor/GenerateButton'; | ||
8 | 13 | ||
9 | function useWindowControlsOverlayVisible(): boolean { | 14 | function useWindowControlsOverlayVisible(): boolean { |
10 | const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] = | 15 | const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] = |
@@ -39,8 +44,11 @@ function useWindowControlsOverlayVisible(): boolean { | |||
39 | return windowControlsOverlayVisible; | 44 | return windowControlsOverlayVisible; |
40 | } | 45 | } |
41 | 46 | ||
42 | export default function TopBar(): JSX.Element { | 47 | export default observer(function TopBar(): JSX.Element { |
48 | const { editorStore } = useRootStore(); | ||
43 | const overlayVisible = useWindowControlsOverlayVisible(); | 49 | const overlayVisible = useWindowControlsOverlayVisible(); |
50 | const { breakpoints } = useTheme(); | ||
51 | const showGenerateButton = useMediaQuery(breakpoints.down('sm')); | ||
44 | 52 | ||
45 | return ( | 53 | return ( |
46 | <AppBar | 54 | <AppBar |
@@ -74,8 +82,11 @@ export default function TopBar(): JSX.Element { | |||
74 | <Typography variant="h6" component="h1" flexGrow={1}> | 82 | <Typography variant="h6" component="h1" flexGrow={1}> |
75 | Refinery | 83 | Refinery |
76 | </Typography> | 84 | </Typography> |
85 | {showGenerateButton && ( | ||
86 | <GenerateButton editorStore={editorStore} hideWarnings /> | ||
87 | )} | ||
77 | <ToggleDarkModeButton /> | 88 | <ToggleDarkModeButton /> |
78 | </Toolbar> | 89 | </Toolbar> |
79 | </AppBar> | 90 | </AppBar> |
80 | ); | 91 | ); |
81 | } | 92 | }); |