From 857da78c491efb71c5987b577f52507f28d5452e Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Thu, 23 Jul 2020 11:16:38 +0200 Subject: [PATCH] initial layout --- .gitignore | 1 + package.json | 6 ++ src/App.css | 43 ++------------ src/App.js | 46 +++++++++------ src/components/Footer.js | 25 +++++++++ src/components/Home.js | 12 ++++ src/components/Navbar.js | 111 +++++++++++++++++++++++++++++++++++++ src/components/NotFound.js | 11 ++++ src/components/Routes.js | 20 +++++++ 9 files changed, 220 insertions(+), 55 deletions(-) create mode 100644 src/components/Footer.js create mode 100644 src/components/Home.js create mode 100644 src/components/Navbar.js create mode 100644 src/components/NotFound.js create mode 100644 src/components/Routes.js diff --git a/.gitignore b/.gitignore index 4d29575..680c904 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +package-lock.json diff --git a/package.json b/package.json index 6f948db..b1efdf0 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.30", + "@fortawesome/free-solid-svg-icons": "^5.14.0", + "@fortawesome/react-fontawesome": "^0.1.11", + "@material-ui/core": "^4.11.0", + "@material-ui/icons": "^4.9.1", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1" }, "scripts": { diff --git a/src/App.css b/src/App.css index 74b5e05..adadb75 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,7 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.wrapper { + min-height: 100vh; /* will cover the 100% of viewport */ + overflow: hidden; + display: block; + position: relative; + padding-bottom: 60px; /* height of your footer + 30px*/ } diff --git a/src/App.js b/src/App.js index ce9cbd2..17ccc55 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,35 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; + +import { BrowserRouter as Router } from 'react-router-dom'; + +import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; + +import Navbar from './components/Navbar'; +import Footer from './components/Footer'; +import Routes from './components/Routes'; + +const theme = createMuiTheme({ + palette: { + primary: { + main: '#4EAF47', + } + } +}); + function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + +
+ +
+ +
+
+ + ); } diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..46466eb --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import { Link } from 'react-router-dom'; + +import Typography from '@material-ui/core/Typography'; + +class Footer extends Component { + render() { + return ( + + ); + }; +} + +export default Footer; diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 0000000..1491af0 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react'; + +class Home extends Component { + render() { + return ( +
+
+ ); + }; +} + +export default Home; diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..3d7e2b4 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,111 @@ +import React, { Component, Fragment } from 'react'; +import { Link } from 'react-router-dom'; + +import { withStyles } from '@material-ui/core/styles'; +import Drawer from '@material-ui/core/Drawer'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import List from '@material-ui/core/List'; +import Typography from '@material-ui/core/Typography'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import InboxIcon from '@material-ui/icons/MoveToInbox'; +import MailIcon from '@material-ui/icons/Mail'; + +const styles = (theme) => ({ + drawerWidth: { + // color: theme.palette.primary.main, + width: window.innerWidth < 600 ? '100%' : '220px', + borderRight: `1px solid ${theme.palette.primary.main}` + }, + appBarColor: { + backgroundColor: theme.palette.primary.main + } +}); + + +class Navbar extends Component { + + constructor(props) { + super(props); + this.state = { + open: false + }; + } + + toggleDrawer = () => { + this.setState({ open: !this.state.open }); + } + + render(){ + return ( +
+ + + + + + + + senseBox Blockly + + + + + +
+
+ + Menü + +
+ +
+
+
+ + {[{text: 'Tutorials', icon: }, {text: 'Einstellungen', icon: }].map((item, index) => ( + + {item.icon} + + + ))} + + + + {[{text: 'Über uns', icon: },{text: 'Kontakt', icon: }, {text: 'Impressum', icon: }].map((item, index) => ( + + {item.icon} + + + ))} + + +
+ ); + } +} + +export default withStyles(styles, {withTheme: true})(Navbar); diff --git a/src/components/NotFound.js b/src/components/NotFound.js new file mode 100644 index 0000000..132451a --- /dev/null +++ b/src/components/NotFound.js @@ -0,0 +1,11 @@ +import React, { Component } from 'react'; + +class NotFound extends Component { + render() { + return ( +

404 Not Found

+ ); + }; +} + +export default NotFound; diff --git a/src/components/Routes.js b/src/components/Routes.js new file mode 100644 index 0000000..ce488b0 --- /dev/null +++ b/src/components/Routes.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; + +import { Route, Switch } from 'react-router-dom'; + +import Home from './Home'; +import NotFound from './NotFound'; + +class Routes extends Component { + + render() { + return ( + + + + + ); + } +} + +export default Routes;