initial layout
This commit is contained in:
Delucse
parent
9a18c5e414
commit
857da78c49
1
.gitignore
vendored
1
.gitignore
vendored
@ -21,3 +21,4 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
package-lock.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": {
|
||||
|
||||
43
src/App.css
43
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*/
|
||||
}
|
||||
|
||||
46
src/App.js
46
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 (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Router>
|
||||
<div className="wrapper">
|
||||
<Navbar />
|
||||
<div style={{margin: '0 22px'}}>
|
||||
<Routes />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
25
src/components/Footer.js
Normal file
25
src/components/Footer.js
Normal file
@ -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 (
|
||||
<footer style={{position:'absolute', bottom: '0', width: '100%'}}>
|
||||
<div style={{minHeight:'30px', backgroundColor:'lightgrey', textAlign: 'center', paddingTop: '2px'}}>
|
||||
<div style={{color: 'grey', height: '100%'}}>
|
||||
<Link to={"/impressum"} style={{textDecoration: 'none', color: 'inherit'}}>Impressum</Link>
|
||||
<Typography style={{margin: '0px 10px 0px 10px', display: 'initial', fontSize: '1rem'}}>|</Typography>
|
||||
<Link to={"/ueberuns"} style={{textDecoration: 'none', color: 'inherit'}}>Über uns</Link>
|
||||
<Typography style={{margin: '0px 10px 0px 10px', display: 'initial', fontSize: '1rem'}}>|</Typography>
|
||||
<Link to={"/faq"} style={{textDecoration: 'none', color: 'inherit'}}>FAQ</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
12
src/components/Home.js
Normal file
12
src/components/Home.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Home;
|
||||
111
src/components/Navbar.js
Normal file
111
src/components/Navbar.js
Normal file
@ -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 (
|
||||
<div>
|
||||
<AppBar
|
||||
position="relative"
|
||||
style={{height: '50px', marginBottom: '30px'}}
|
||||
classes={{root: this.props.classes.appBarColor}}
|
||||
>
|
||||
<Toolbar style={{height: '50px', minHeight: '50px', padding: 0}}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={this.toggleDrawer}
|
||||
style={{margin: '0 10px'}}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Link to={"/"} style={{textDecoration: 'none', color: 'inherit'}}>
|
||||
<Typography variant="h6" noWrap>
|
||||
senseBox Blockly
|
||||
</Typography>
|
||||
</Link>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
anchor="left"
|
||||
onClose={this.toggleDrawer}
|
||||
open={this.state.open}
|
||||
classes={{paper: this.props.classes.drawerWidth}}
|
||||
ModalProps={{keepMounted: true}} // Better open performance on mobile.
|
||||
>
|
||||
<div style={{height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px'}} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
|
||||
<div style={{display:' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%'}}>
|
||||
<Typography variant="h6" style={{display:'inline'}}>
|
||||
Menü
|
||||
</Typography>
|
||||
<div style={{float: 'right'}}>
|
||||
<ChevronLeftIcon style={{verticalAlign: 'middle'}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<List>
|
||||
{[{text: 'Tutorials', icon: <InboxIcon />}, {text: 'Einstellungen', icon: <InboxIcon />}].map((item, index) => (
|
||||
<ListItem button key={index} onClick={this.toggleDrawer}>
|
||||
<ListItemIcon>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
<Divider classes={{root: this.props.classes.appBarColor}} style={{marginTop: 'auto'}}/>
|
||||
<List>
|
||||
{[{text: 'Über uns', icon: <InboxIcon />},{text: 'Kontakt', icon: <MailIcon />}, {text: 'Impressum', icon: <InboxIcon />}].map((item, index) => (
|
||||
<ListItem button key={index} onClick={this.toggleDrawer}>
|
||||
<ListItemIcon>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles, {withTheme: true})(Navbar);
|
||||
11
src/components/NotFound.js
Normal file
11
src/components/NotFound.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class NotFound extends Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>404 Not Found</h1>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default NotFound;
|
||||
20
src/components/Routes.js
Normal file
20
src/components/Routes.js
Normal file
@ -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 (
|
||||
<Switch>
|
||||
<Route path="/" exact component={Home} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Routes;
|
||||
Loading…
x
Reference in New Issue
Block a user