diff --git a/src/App.js b/src/App.js
index 75bc102..756d5a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
import './variables.css';
import './App.css';
+
import React, { Component } from 'react';
+
import NavigationDrawer from './components/NavigationDrawer.js'
import Header from './components/Header.js'
import PageArea from './components/PageArea.js'
@@ -17,7 +19,7 @@ class App extends Component {
/>
*/}
-
+
diff --git a/src/components/BottomMenu.js b/src/components/BottomMenu.js
index aec7f52..0f98a17 100644
--- a/src/components/BottomMenu.js
+++ b/src/components/BottomMenu.js
@@ -1,13 +1,17 @@
-import './css/BottomMenu.css';
import React, { Component } from 'react';
+import './css/BottomMenu.css';
+import ticketsIcon from '../img/tickets.svg';
+import buyTicketsIcon from '../img/tickets+.svg';
+import travelIcon from '../img/tram.svg';
+import BottomMenuButton from './BottomMenuButton';
class BottomMenu extends Component {
render() {
return (
);
}
diff --git a/src/components/BottomMenuButton.js b/src/components/BottomMenuButton.js
new file mode 100644
index 0000000..04cf455
--- /dev/null
+++ b/src/components/BottomMenuButton.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './css/BottomMenu.css';
+
+class BottomMenuButton extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render(label, icon) {
+ return (
+
+ );
+ }
+}
+
+export default BottomMenuButton;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index ec3aae6..d27a838 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,11 +1,13 @@
-import './css/Header.css';
import React, { Component } from 'react';
+import './css/Header.css';
+import navIcon from '../img/menu.svg'
class Header extends Component {
render() {
return (
-
+
+ {this.props.title}
);
}
diff --git a/src/components/PageArea.js b/src/components/PageArea.js
index 6b25283..df7e58e 100644
--- a/src/components/PageArea.js
+++ b/src/components/PageArea.js
@@ -4,7 +4,9 @@ import React, { Component } from 'react';
class PageArea extends Component {
render() {
return (
-
+
+
+
);
}
}
diff --git a/src/components/css/BottomMenu.css b/src/components/css/BottomMenu.css
index e227caa..5aa7d54 100644
--- a/src/components/css/BottomMenu.css
+++ b/src/components/css/BottomMenu.css
@@ -1,18 +1,32 @@
#bottomMenu {
width: 100%;
- height: 8vh;
- background: lightcoral;
+ height: 9vh;
+ min-height: 60px;
+ background: white;
display: flex;
justify-content: space-evenly;
+ border-top: 2px solid rgba(0, 0, 0, 0.05);
}
#bottomMenu button {
background: none;
border: none;
font-size: 0.9em;
- margin-bottom: 5px;
flex-basis: calc(100%/3);
display: flex;
- align-items: flex-end;
+ flex-direction: column;
+ align-items: center;
justify-content: space-evenly;
+}
+
+#bottomMenu button:active {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+#bottomMenu button span {
+ color: black;
+}
+
+#bottomMenu button img {
+ width: 25px;
}
\ No newline at end of file
diff --git a/src/components/css/Header.css b/src/components/css/Header.css
index 16482b5..0ffe297 100644
--- a/src/components/css/Header.css
+++ b/src/components/css/Header.css
@@ -1,5 +1,21 @@
header {
width: 100vw;
- height: 15vh;
- background: burlywood;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 15px;
+ position: fixed;
+ top: 0;
+}
+
+#navBtn img {
+ height: 1.4em;
+}
+
+#pageTitle {
+ font-size: 1.2em;
+ letter-spacing: 0.3px;
+ color: white;
+ font-family: 'Roboto Light', sans-serif;
+ padding: 0 0 0 25px;
}
\ No newline at end of file
diff --git a/src/img/calendar.svg b/src/img/calendar.svg
new file mode 100644
index 0000000..670873d
--- /dev/null
+++ b/src/img/calendar.svg
@@ -0,0 +1,59 @@
+
+
+
diff --git a/src/img/clock.svg b/src/img/clock.svg
new file mode 100644
index 0000000..5ee5644
--- /dev/null
+++ b/src/img/clock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/img/menu.svg b/src/img/menu.svg
new file mode 100644
index 0000000..416f1f9
--- /dev/null
+++ b/src/img/menu.svg
@@ -0,0 +1,23 @@
+
+
+
diff --git a/src/img/redo.svg b/src/img/redo.svg
new file mode 100644
index 0000000..c68d924
--- /dev/null
+++ b/src/img/redo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/img/tickets+.svg b/src/img/tickets+.svg
new file mode 100644
index 0000000..fa9f687
--- /dev/null
+++ b/src/img/tickets+.svg
@@ -0,0 +1,56 @@
+
+
+
diff --git a/src/img/tickets.svg b/src/img/tickets.svg
new file mode 100644
index 0000000..071a4c7
--- /dev/null
+++ b/src/img/tickets.svg
@@ -0,0 +1,65 @@
+
+
+
diff --git a/src/img/tram.svg b/src/img/tram.svg
new file mode 100644
index 0000000..2d919e3
--- /dev/null
+++ b/src/img/tram.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/src/index.css b/src/index.css
index d90fde9..60de5e1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,4 +18,9 @@
html, body, #root, #app {
width: 100%;
height: 100%;
+}
+
+button {
+ background: none;
+ border: none;
}
\ No newline at end of file