134 lines
3.0 KiB
JavaScript
134 lines
3.0 KiB
JavaScript
import _ from "lodash";
|
|
import React, { Component } from "react";
|
|
import {
|
|
Container,
|
|
Icon,
|
|
Image,
|
|
Menu,
|
|
Sidebar,
|
|
Responsive,
|
|
} from "semantic-ui-react";
|
|
|
|
const NavBarMobile = ({
|
|
children,
|
|
leftItems,
|
|
onPusherClick,
|
|
onToggle,
|
|
rightItems,
|
|
visible,
|
|
}) => (
|
|
<Sidebar.Pushable>
|
|
<Sidebar
|
|
as={Menu}
|
|
animation="overlay"
|
|
icon="labeled"
|
|
inverted
|
|
items={leftItems}
|
|
vertical
|
|
visible={visible}
|
|
/>
|
|
<Sidebar.Pusher
|
|
dimmed={visible}
|
|
onClick={onPusherClick}
|
|
style={{ minHeight: "100vh" }}
|
|
>
|
|
<Menu fixed="top" inverted>
|
|
<Menu.Item>
|
|
<Image size="mini" src="smart-home_index.png" />
|
|
</Menu.Item>
|
|
<Menu.Item onClick={onToggle}>
|
|
<Icon name="sidebar" />
|
|
</Menu.Item>
|
|
<Menu.Menu position="right">
|
|
{_.map(rightItems, (item) => (
|
|
<Menu.Item {...item} />
|
|
))}
|
|
</Menu.Menu>
|
|
</Menu>
|
|
{children}
|
|
</Sidebar.Pusher>
|
|
</Sidebar.Pushable>
|
|
);
|
|
|
|
const NavBarDesktop = ({ leftItems, rightItems }) => (
|
|
<Menu fixed="top" inverted>
|
|
<Menu.Item>
|
|
<Image size="mini" src="smart-home_index.png" />
|
|
</Menu.Item>
|
|
{_.map(leftItems, (item) => (
|
|
<Menu.Item {...item} />
|
|
))}
|
|
<Menu.Menu position="right">
|
|
{_.map(rightItems, (item) => (
|
|
<Menu.Item {...item} />
|
|
))}
|
|
</Menu.Menu>
|
|
</Menu>
|
|
);
|
|
|
|
const NavBarChildren = ({ children }) => (
|
|
<Container style={{ marginTop: "5em" }}>{children}</Container>
|
|
);
|
|
|
|
class HomeNavabarApp extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
logged: true,
|
|
email: "",
|
|
password: "",
|
|
};
|
|
}
|
|
state = {
|
|
visible: false,
|
|
};
|
|
|
|
handlePusher = () => {
|
|
const { visible } = this.state;
|
|
|
|
if (visible) this.setState({ visible: false });
|
|
};
|
|
|
|
handleToggle = () => this.setState({ visible: !this.state.visible });
|
|
|
|
render() {
|
|
const { children, leftItems, rightItems } = this.props;
|
|
const { visible } = this.state;
|
|
|
|
return (
|
|
<div>
|
|
<Responsive {...Responsive.onlyMobile}>
|
|
<NavBarMobile
|
|
leftItems={leftItems}
|
|
onPusherClick={this.handlePusher}
|
|
onToggle={this.handleToggle}
|
|
rightItems={rightItems}
|
|
visible={visible}
|
|
>
|
|
<NavBarChildren>{children}</NavBarChildren>
|
|
</NavBarMobile>
|
|
</Responsive>
|
|
<Responsive minWidth={Responsive.onlyTablet.minWidth}>
|
|
<NavBarDesktop leftItems={leftItems} rightItems={rightItems} />
|
|
<NavBarChildren>{children}</NavBarChildren>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const leftItems = [{ as: "a", content: "Home", key: "home", href: "/" }];
|
|
const rightItems = [
|
|
{ as: "a", content: "Login", key: "login", href: "/login" },
|
|
{ as: "a", content: "Sign up", key: "register", href: "/signup" },
|
|
];
|
|
|
|
const HomeNavbarApp = () => (
|
|
<HomeNavabarApp
|
|
leftItems={leftItems}
|
|
rightItems={rightItems}
|
|
></HomeNavabarApp>
|
|
);
|
|
|
|
export default HomeNavbarApp;
|