projectPart2/Problem1: Positioned the elements in the header

projectSecondPart/src/photo-share/components/top-bar/TopBar.css

-.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;
 }

projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx

 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
+			<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>
 		);
 	}
 }