Max Schmitt
8 years ago
5 changed files with 34 additions and 112 deletions
@ -1,82 +0,0 @@ |
|||||
import React, { Component } from 'react' |
|
||||
import { Container, Menu, Input } from 'semantic-ui-react' |
|
||||
import Home from '../App/App' |
|
||||
|
|
||||
import React from 'react' |
|
||||
import { render } from 'react-dom' |
|
||||
|
|
||||
// First we import some modules...
|
|
||||
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router' |
|
||||
|
|
||||
// Make a new component to render inside of Inbox
|
|
||||
const Message = React.createClass({ |
|
||||
render() { |
|
||||
return <h3>Message</h3> |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const Inbox = React.createClass({ |
|
||||
render() { |
|
||||
return ( |
|
||||
<div> |
|
||||
<h2>Inbox</h2> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
|
|
||||
|
|
||||
class MenuComponent extends Component { |
|
||||
componentWillMount() { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
state = { |
|
||||
activeItem: 'home', |
|
||||
history: null |
|
||||
} |
|
||||
|
|
||||
handleItemClick = (e, { name }) => this.setState({ activeItem: name }) |
|
||||
|
|
||||
render() { |
|
||||
const { activeItem, history } = this.state |
|
||||
let currentItem; |
|
||||
switch (activeItem) { |
|
||||
case 'home': |
|
||||
currentItem = <Home /> |
|
||||
break; |
|
||||
} |
|
||||
return ( |
|
||||
// <Container id='rootContainer' >
|
|
||||
// <Menu secondary >
|
|
||||
// <Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick} />
|
|
||||
// <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
|
|
||||
// <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
|
|
||||
// <Menu.Menu position='right'>
|
|
||||
// <Menu.Item>
|
|
||||
// <Input icon='search' placeholder='Search...' />
|
|
||||
// </Menu.Item>
|
|
||||
// <Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
|
|
||||
// </Menu.Menu>
|
|
||||
// </Menu>
|
|
||||
// {{ currentItem }}
|
|
||||
// </Container>
|
|
||||
<Router history={history}> |
|
||||
<Route path="/" component={App}> |
|
||||
<IndexRoute component={Home} /> |
|
||||
<Route path="about" component={About} /> |
|
||||
<Route path="inbox" component={Inbox}> |
|
||||
{/* add some nested routes where we want the UI to nest */} |
|
||||
{/* render the stats page when at `/inbox` */} |
|
||||
<IndexRoute component={InboxStats} /> |
|
||||
{/* render the message component at /inbox/messages/123 */} |
|
||||
<Route path="messages/:id" component={Message} /> |
|
||||
</Route> |
|
||||
</Route> |
|
||||
</Router> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default MenuComponent; |
|
||||
@ -1,18 +0,0 @@ |
|||||
<html> |
|
||||
|
|
||||
<body> |
|
||||
<div id="App"></div> |
|
||||
|
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.js"></script> |
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> |
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script> |
|
||||
<script> |
|
||||
fetch("./index.js").then(function (response) { |
|
||||
response.text().then(function (js) { |
|
||||
eval(Babel.transform(js, { presets: ['es2015', 'react'] }).code); |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
|
||||
Loading…
Reference in new issue