Create structure of basic UI components

This commit is contained in:
André Wahlberg
2020-11-20 09:33:40 +01:00
parent cf7a1e8b6f
commit 12af81f21f
11 changed files with 95 additions and 58 deletions

View File

@ -0,0 +1,16 @@
import './css/BottomMenu.css';
import React, { Component } from 'react';
class BottomMenu extends Component {
render() {
return (
<div id="bottomMenu">
<button>Biljetter</button>
<button>Köp biljett</button>
<button>Reseplanering</button>
</div>
);
}
}
export default BottomMenu;

14
src/components/Header.js Normal file
View File

@ -0,0 +1,14 @@
import './css/Header.css';
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<header>
<button id="navDrawBtn"></button>
</header>
);
}
}
export default Header;

View File

@ -0,0 +1,12 @@
import './css/NavigationDrawer.css';
import React, { Component } from 'react';
class NavigationDrawer extends Component {
render() {
return (
<div id="navDrawer"></div>
);
}
}
export default NavigationDrawer;

View File

@ -0,0 +1,12 @@
import './css/PageArea.css';
import React, { Component } from 'react';
class PageArea extends Component {
render() {
return (
<div id="pageArea"></div>
);
}
}
export default PageArea;

View File

@ -0,0 +1,18 @@
#bottomMenu {
width: 100%;
height: 8vh;
background: lightcoral;
display: flex;
justify-content: space-evenly;
}
#bottomMenu button {
background: none;
border: none;
font-size: 0.9em;
margin-bottom: 5px;
flex-basis: calc(100%/3);
display: flex;
align-items: flex-end;
justify-content: space-evenly;
}

View File

@ -0,0 +1,5 @@
header {
width: 100vw;
height: 15vh;
background: burlywood;
}

View File

View File

@ -0,0 +1,4 @@
#pageArea {
width: 100vw;
flex: 1 1 auto;
}