Apply header and sidebar layout navigation
This commit is contained in:
Anthony Laibe
Pascal Precht
parent
c8bd4f19e3
commit
f9dd202713
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container } from 'reactstrap';
|
||||
import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container} from 'reactstrap';
|
||||
import {LIGHT_THEME, DARK_THEME} from '../constants';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
|
||||
|
|
@ -23,99 +24,120 @@ import SearchBar from './SearchBar';
|
|||
|
||||
import logo from '../images/logo-new.svg';
|
||||
|
||||
const sidebarNavItems = {items: [
|
||||
{name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
|
||||
{name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
|
||||
{name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
|
||||
{name: "Explorer", url: "/embark/explorer", icon: "fa fa-compass", children: [
|
||||
const HEADER_NAV_ITEMS = [
|
||||
{name: "Dashboard", to: "/embark", icon: 'tachometer'},
|
||||
{name: "Deployment", to: "/embark/deployment", icon: "arrow-up"},
|
||||
{name: "Contracts", to: "/embark/contracts", icon: "file-text"},
|
||||
{name: "Explorer", to: "/embark/explorer/overview", icon: "compass"},
|
||||
{name: "Editor", to: "/embark/editor", icon: "codepen"},
|
||||
{name: "Utils", to: "/embark/utilities/converter", icon: "cog"}
|
||||
];
|
||||
|
||||
const SIDEBAR_NAV_ITEMS = {
|
||||
"/embark/explorer" : {items: [
|
||||
{url: "/embark/explorer/overview", icon: "fa fa-signal", name: "Overview"},
|
||||
{url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
|
||||
{url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
|
||||
{url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"}
|
||||
]},
|
||||
{name: "Editor", url: "/embark/editor", icon: "fa fa-codepen"},
|
||||
{name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
|
||||
{name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
|
||||
"/embark/utilities/": {items: [
|
||||
{url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"},
|
||||
{url: "/embark/utilities/communication", icon: "fa fa-phone", name: "Communication"},
|
||||
{url: "/embark/utilities/ens", icon: "fa fa-circle", name: "ENS"},
|
||||
{url: "/embark/utilities/sign-and-verify", icon: "fa fa-edit", name: "Sign & Verify"},
|
||||
{url: "/embark/utilities/transaction-decoder", icon: "fa fa-edit", name: "Transaction Decoder"}
|
||||
]}
|
||||
]};
|
||||
};
|
||||
|
||||
const removeCssClasses = () => {
|
||||
document.body.classList.remove('sidebar-fixed');
|
||||
document.body.classList.remove('sidebar-lg-show');
|
||||
}
|
||||
|
||||
const getSidebar = (location) => {
|
||||
const currentItem = Object.keys(SIDEBAR_NAV_ITEMS).find(path => location.pathname.startsWith(path));
|
||||
return currentItem && SIDEBAR_NAV_ITEMS[currentItem];
|
||||
}
|
||||
|
||||
function searchTheExplorer(value) {
|
||||
// TODO: search
|
||||
}
|
||||
|
||||
const Layout = ({children, logout, credentials, location, toggleTheme, currentTheme}) => (
|
||||
<div className="app animated fadeIn">
|
||||
<AppHeader fixed>
|
||||
<AppSidebarToggler className="d-lg-none" display="md" mobile />
|
||||
<AppNavbarBrand
|
||||
full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
|
||||
minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
|
||||
/>
|
||||
<AppSidebarToggler className="d-md-down-none" display="lg" />
|
||||
<Nav className="d-md-down-none" navbar>
|
||||
{sidebarNavItems.items.map((item) => {
|
||||
return (
|
||||
<NavItem className="px-3" key={item.url}>
|
||||
<NavLink href={item.url}>
|
||||
<i className={item.icon}> </i>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
)
|
||||
})}
|
||||
</Nav>
|
||||
<Nav className="ml-auto" navbar>
|
||||
<SearchBar searchSubmit={searchValue => searchTheExplorer(searchValue)}/>
|
||||
<AppHeaderDropdown direction="down">
|
||||
<DropdownToggle nav>
|
||||
<i className="icon-settings" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right style={{ right: 'auto' }}>
|
||||
<DropdownItem className="text-capitalize" onClick={() => toggleTheme()}>
|
||||
<FontAwesome name={currentTheme === DARK_THEME ? 'sun-o' : 'moon-o'} />
|
||||
{currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME} Mode
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</AppHeaderDropdown>
|
||||
</Nav>
|
||||
</AppHeader>
|
||||
<div className="app-body">
|
||||
<AppSidebar fixed display="lg">
|
||||
<AppSidebarHeader />
|
||||
<AppSidebarForm />
|
||||
<AppSidebarNav navConfig={sidebarNavItems} location={location} />
|
||||
<AppSidebarFooter />
|
||||
<AppSidebarMinimizer />
|
||||
</AppSidebar>
|
||||
<main className="main">
|
||||
<Container fluid className="h-100" style={{marginTop: '24px'}}>
|
||||
{children}
|
||||
</Container>
|
||||
</main>
|
||||
<AppAside fixed>
|
||||
</AppAside>
|
||||
const Layout = ({children, logout, location, toggleTheme, currentTheme}) => {
|
||||
const sidebar = getSidebar(location);
|
||||
if (!sidebar) {
|
||||
removeCssClasses();
|
||||
}
|
||||
return (
|
||||
<div className="app animated fadeIn">
|
||||
<AppHeader fixed>
|
||||
<AppSidebarToggler className="d-lg-none" display="md" mobile />
|
||||
<AppNavbarBrand
|
||||
full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
|
||||
minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
|
||||
/>
|
||||
{sidebar && <AppSidebarToggler className="d-md-down-none" display="lg" />}
|
||||
<Nav className="d-md-down-none" navbar>
|
||||
{HEADER_NAV_ITEMS.map((item) => {
|
||||
return (
|
||||
<NavItem className="px-3" key={item.to}>
|
||||
<NavLink exact tag={Link} to={item.to}>
|
||||
<FontAwesome className="mr-2" name={item.icon} />
|
||||
{item.name}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
)
|
||||
})}
|
||||
</Nav>
|
||||
<Nav className="ml-auto" navbar>
|
||||
<SearchBar searchSubmit={searchValue => searchTheExplorer(searchValue)}/>
|
||||
<AppHeaderDropdown direction="down">
|
||||
<DropdownToggle nav>
|
||||
<i className="icon-settings" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right style={{ right: 'auto' }}>
|
||||
<DropdownItem className="text-capitalize" onClick={() => toggleTheme()}>
|
||||
<FontAwesome name={currentTheme === DARK_THEME ? 'sun-o' : 'moon-o'} />
|
||||
{currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME} Mode
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</AppHeaderDropdown>
|
||||
</Nav>
|
||||
</AppHeader>
|
||||
<div className="app-body">
|
||||
{sidebar &&
|
||||
<AppSidebar fixed display="lg">
|
||||
<AppSidebarHeader />
|
||||
<AppSidebarForm />
|
||||
<AppSidebarNav navConfig={sidebar} location={location} />
|
||||
<AppSidebarFooter />
|
||||
<AppSidebarMinimizer />
|
||||
</AppSidebar>
|
||||
}
|
||||
<main className="main">
|
||||
<Container fluid className="h-100" style={{marginTop: '24px'}}>
|
||||
{children}
|
||||
</Container>
|
||||
</main>
|
||||
<AppAside fixed>
|
||||
</AppAside>
|
||||
</div>
|
||||
<AppFooter>
|
||||
<span className="ml-auto">
|
||||
Embark
|
||||
<a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
|
||||
|
|
||||
<a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
|
||||
</span>
|
||||
</AppFooter>
|
||||
</div>
|
||||
<AppFooter>
|
||||
<span className="ml-auto">
|
||||
Embark
|
||||
<a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
|
||||
|
|
||||
<a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
|
||||
</span>
|
||||
</AppFooter>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.element,
|
||||
tabs: PropTypes.arrayOf(PropTypes.object),
|
||||
credentials: PropTypes.object,
|
||||
location: PropTypes.object,
|
||||
logout: PropTypes.func,
|
||||
toggleTheme: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -80,8 +80,10 @@ class AppContainer extends Component {
|
|||
if (this.shouldRenderLogin()) {
|
||||
content = <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />;
|
||||
} else {
|
||||
content = <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}
|
||||
toggleTheme={() => this.toggleTheme()} currentTheme={this.props.theme}>
|
||||
content = <Layout location={this.props.location}
|
||||
logout={this.props.logout}
|
||||
toggleTheme={() => this.toggleTheme()}
|
||||
currentTheme={this.props.theme}>
|
||||
<React.Fragment>{routes}</React.Fragment>
|
||||
</Layout>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue