Skip to content
Snippets Groups Projects
Commit 6ecb0afe authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

projectPart2/Problem1: Positioned the elements in the header

parent 7086831e
Branches
No related tags found
No related merge requests found
.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;
}
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>
);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment