diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.css b/projectSecondPart/src/photo-share/components/top-bar/TopBar.css index 7a9a179d34cbd7688dcd5f4a54c66b4c1d0d37b7..5f803005301972b99f85aba6ca00686eb7b0ed26 100644 --- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.css +++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.css @@ -1,4 +1,11 @@ -.prog2053-topbar-appBar { - height: 60; - justify-content: 'center'; +.prog2053-topbar-toolbar { + justify-content: space-between; +} + +.prog2053-topbar-toolbar #left{ + background-color: red; +} + +.prog2053-topbar-toolbar #right{ + background-color: orange; } diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx index 76efac144e66bd6d3116041853a1228ce81c2bc3..28bc38e07c115e9c941a5ea4771983454a77f2e6 100644 --- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx +++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { - AppBar, Toolbar, Typography + AppBar, Box, Toolbar, Typography } from '@material-ui/core'; import './TopBar.css'; @@ -8,15 +8,24 @@ import './TopBar.css'; * Define TopBar, a React componment of PROG2053 part #2 */ class TopBar extends React.Component { + constructor(props) { + super(props); + this.state = {right: 'right', left: 'name'}; + } render() { return ( - <AppBar className="prog2053-topbar-appBar" position="absolute"> - <Toolbar> - <Typography variant="h5" color="inherit"> - This is the TopBar component - </Typography> - </Toolbar> - </AppBar> + <Box sx={{flexGrow: 1}}> + <AppBar position="fixed"> + <Toolbar className="prog2053-topbar-toolbar"> + <Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="left"> + {this.state.left} + </Typography> + <Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="right"> + {this.state.right} + </Typography> + </Toolbar> + </AppBar> + </Box> ); } }