From 6ecb0afe857460e2cac42ce00ee5fc53ac738f7a Mon Sep 17 00:00:00 2001 From: Martin Wighus Holtmon <martinwh@stud.ntnu.no> Date: Thu, 11 Nov 2021 16:11:27 +0100 Subject: [PATCH] projectPart2/Problem1: Positioned the elements in the header --- .../photo-share/components/top-bar/TopBar.css | 13 +++++++--- .../photo-share/components/top-bar/TopBar.jsx | 25 +++++++++++++------ 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.css b/projectSecondPart/src/photo-share/components/top-bar/TopBar.css index 7a9a179..5f80300 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 76efac1..28bc38e 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> ); } } -- GitLab