11import * as React from 'react' ;
22import { useSelector } from 'react-redux' ;
33import { ApiStatus , RootState , DisplayStatus , ControlStatus } from '../../react-redux&middleware/redux/typesImports' ;
4- import { createTheme , ThemeProvider , IconButton , MenuIcon , Drawer , Grid , AppBar , Toolbar } from '../../muiImports' ;
5-
6- import SideBar from './sidebar/sidebar'
4+ import {
5+ createTheme ,
6+ ThemeProvider ,
7+ IconButton ,
8+ Drawer ,
9+ Grid ,
10+ AppBar ,
11+ Toolbar ,
12+ Typography ,
13+ // useMediaQuery,
14+ // useTheme
15+ } from '@mui/material' ;
16+ import MenuIcon from '@mui/icons-material/Menu' ;
17+ import SideBar from './sidebar/sidebar' ;
718import TopBar from './topbar/topBar' ;
819import { API_Name } from '../../react-redux&middleware/redux/types/apiEnums' ;
920
21+ import {
22+ useTheme
23+ } from '@mui/material' ;
24+
1025const currTheme = createTheme ( {
1126 palette : {
1227 primary : {
13- main : '#ffffff'
14- }
28+ main : '#ffffff' ,
29+ contrastText : '#000000'
30+ } ,
1531 } ,
1632} ) ;
1733
1834export default function AppNavBar ( props ) {
19- const [ state , setState ] = React . useState ( { isOpen : false } ) ;
20- const apiStatus = useSelector ( ( state : RootState ) => {
21- return state . APIStatusReducer as ApiStatus ;
22- } )
23- const displayStatus = useSelector ( ( state : RootState ) => {
24- return state . DisplayReducer as DisplayStatus ;
25- } )
26- const controlStatus = useSelector ( ( state : RootState ) => {
27- return state . ControlReducer as ControlStatus ;
28- } )
29-
35+ const [ isDrawerOpen , setDrawerOpen ] = React . useState ( false ) ;
36+ const apiStatus = useSelector ( ( state : RootState ) => state . APIStatusReducer as ApiStatus ) ;
37+ const displayStatus = useSelector ( ( state : RootState ) => state . DisplayReducer as DisplayStatus ) ;
38+ const controlStatus = useSelector ( ( state : RootState ) => state . ControlReducer as ControlStatus ) ;
3039
31- let apiDisplayName = API_Name ( apiStatus . currentApi )
32-
33- const myTheme = currTheme
40+ const apiDisplayName = API_Name ( apiStatus . currentApi ) ;
41+ const accentColor = displayStatus . secondaryColor ;
3442
43+ const theme = useTheme ( ) ;
44+ // const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
3545
36- const changeVisibility = ( ) => {
37- let topbarID = document . getElementById ( "topbar-wrapper" )
38- if ( ! displayStatus . menuVisible ) {
39- if ( topbarID ) {
40- topbarID . style . opacity = "0"
41- }
42- } else {
43- if ( topbarID ) {
44- topbarID . style . opacity = "1"
45- }
46+ const toggleDrawer = ( open : boolean ) => ( event : React . MouseEvent | React . KeyboardEvent ) => {
47+ if ( event . type === 'keydown' && ( ( event as React . KeyboardEvent ) . key === 'Tab' || ( event as React . KeyboardEvent ) . key === 'Shift' ) ) {
48+ return ;
4649 }
47- }
48- const changeVisibilityOver = ( ) => {
49- let topbarID = document . getElementById ( "topbar-wrapper" )
50- if ( topbarID ) {
51- topbarID . style . opacity = "1"
52- }
53- }
54-
55-
56- const toggleDrawer = ( open : boolean ) => ( event : React . MouseEvent ) => {
57- setState ( { ...state , isOpen : open } ) ;
50+ setDrawerOpen ( open ) ;
5851 } ;
59-
60- // const dispatch = useDispatch();
61- let accent_color = displayStatus . secondaryColor ;
62- // if (typeof accent_color === 'undefined') {
63- // accent_color = "#3f51bf";
64- // dispatch({type: 'CHANGE_SECONDARY_THEME', payload: accent_color});
65- // }<Toolbar style={{ backgroundColor: accent_color, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', padding: '0 10px', }}>
66- // console.log("Accent Color: ", accent_color); <Toolbar style={{ backgroundColor: accent_color, width: '100%', maxHeight: '10vh', paddingLeft: '10px' }}>
52+ console . log ( apiStatus . currentApi )
6753
6854 return (
69- < AppBar position = "fixed" id = "topbar-wrapper" onMouseOut = { changeVisibility } onMouseOver = { changeVisibilityOver } style = { { transition : '0.6s' } } >
70- < Grid container spacing = { 2 } alignItems = "center" >
71- < Toolbar style = { { backgroundColor : accent_color , width : '100%' , display : 'flex' , justifyContent : 'space-between' , alignItems : 'center' , flexWrap : 'wrap' , padding : '10px' } } >
72- < Grid item xs = { 6 } >
73- < Grid container spacing = { 1 } alignItems = "center" wrap = "wrap" >
74- < Grid item >
75- < IconButton onClick = { toggleDrawer ( true ) } >
76- < ThemeProvider theme = { myTheme } >
77- < MenuIcon color = "primary" fontSize = "large" />
78- </ ThemeProvider >
55+ < ThemeProvider theme = { theme } >
56+ < AppBar position = "fixed" id = "topbar-wrapper" sx = { { transition : '0.6s' , backgroundColor : accentColor } } >
57+ < Toolbar sx = { { width : '100%' , minHeight : 56 , color : 'white' } } >
58+ < Grid container alignItems = "center" justifyContent = "space-between" >
59+ < Grid container alignItems = "center" justifyContent = "space-between" sx = { { width : '100%' } } >
60+ { /* Left Section: Menu Icon and Title */ }
61+ < Grid item sx = { { display : 'flex' , alignItems : 'center' } } >
62+ < IconButton edge = "start" sx = { { color : 'white' } } aria-label = "menu" onClick = { toggleDrawer ( true ) } >
63+ < MenuIcon />
7964 </ IconButton >
80- < Drawer disableEnforceFocus open = { state . isOpen } onClose = { toggleDrawer ( false ) } >
81- < SideBar isRecording = { props . isRecording } onClose = { toggleDrawer ( false ) } />
65+ < Drawer anchor = "left" open = { isDrawerOpen } onClose = { toggleDrawer ( false ) } >
66+ < SideBar isRecording = { props . isRecording } onClose = { toggleDrawer ( false ) } />
8267 </ Drawer >
68+ < Typography variant = "h6" noWrap sx = { { color : 'white' , paddingLeft : 2 } } >
69+ ScribeAR
70+ </ Typography >
8371 </ Grid >
84- < Grid item >
85- < h3 style = { { textAlign : "left" , paddingLeft : '10px' } } > ScribeAR</ h3 >
72+
73+ { /* Right Section: TopBar (Strictly on one line with padding) */ }
74+ < Grid
75+ item
76+ sx = { {
77+ display : 'flex' ,
78+ alignItems : 'center' ,
79+ whiteSpace : 'nowrap' ,
80+ flexShrink : 0 ,
81+ pr : 5
82+ } }
83+ >
84+ < TopBar
85+ theme = { theme }
86+ apiDisplayName = { apiDisplayName }
87+ listening = { controlStatus . listening }
88+ menuVisible = { displayStatus . menuVisible }
89+ />
8690 </ Grid >
8791 </ Grid >
8892 </ Grid >
89- < Grid item xs = { 6 } >
90- < TopBar theme = { myTheme } apiDisplayName = { apiDisplayName } listening = { controlStatus . listening } menuVisible = { displayStatus . menuVisible } />
91- </ Grid >
9293 </ Toolbar >
93- </ Grid >
94- </ AppBar >
95- )
96-
97-
98-
99-
100- // return (
101- // <AppBar position="fixed" id="topbar-wrapper" onMouseOut={changeVisibility} onMouseOver={changeVisibilityOver} style={{ transition: '0.6s' }}>
102- // <Grid container spacing={2} alignItems="center" >
103- // <Toolbar style={{ backgroundColor: displayStatus.secondaryColor, width: '100%', maxHeight: '10vh', paddingLeft: '20px' }}>
104- // <Grid item xs={6}>
105- // <Grid container spacing={1} alignItems="center" >
106- // <Grid item>
107- // <IconButton onClick={toggleDrawer(true)}>
108- // <ThemeProvider theme={myTheme}>
109- // <MenuIcon color="primary" fontSize="large"/>
110- // </ThemeProvider>
111- // </IconButton>
112- // <Drawer disableEnforceFocus open={state.isOpen} onClose={toggleDrawer(false)}>
113- // <SideBar isRecording={props.isRecording} />
114- // </Drawer>
115- // </Grid>
116- // <Grid item>
117- // <h2 style={{ textAlign: "left", paddingLeft: '20px' }}>ScribeAR</h2>
118- // </Grid>
119- // </Grid>
120- // </Grid>
121- // <Grid item xs={6}>
122- // <Grid container direction="row" justifyContent="flex-end" alignItems="center">
123- // <Grid item >
124- // <PickApi theme={currTheme} display={display}/>
125- // </Grid>
126-
127- // <Grid item >
128- // <Listening listening={controlStatus.listening} />
129- // </Grid>
130-
131- // <Grid item>
132- // <MenuHider menuVisible={displayStatus.menuVisible} />
133- // </Grid>
134-
135- // <Grid item>
136- // <Fullscreen />
137- // </Grid>
138- // </Grid>
139- // </Grid>
140- // </Toolbar>
141- // </Grid>
142- // </AppBar>
143- // )
94+ </ AppBar >
95+ </ ThemeProvider >
96+ ) ;
14497}
0 commit comments