This commit is contained in:
Jonathan Rainville 2018-10-19 09:55:41 -04:00 committed by Pascal Precht
parent 6150ce0b54
commit 261b4eddf3
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 26 additions and 28 deletions

View File

@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom'; import {Link, withRouter} from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container} from 'reactstrap';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {withRouter} from "react-router-dom";
import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container, Alert} from 'reactstrap'; import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container, Alert} from 'reactstrap';
import {explorerSearch} from "../actions"; import {explorerSearch} from "../actions";
import {LIGHT_THEME, DARK_THEME} from '../constants'; import {LIGHT_THEME, DARK_THEME} from '../constants';
@ -55,12 +53,12 @@ const SIDEBAR_NAV_ITEMS = {
const removeCssClasses = () => { const removeCssClasses = () => {
document.body.classList.remove('sidebar-fixed'); document.body.classList.remove('sidebar-fixed');
document.body.classList.remove('sidebar-lg-show'); document.body.classList.remove('sidebar-lg-show');
} };
const getSidebar = (location) => { const getSidebar = (location) => {
const currentItem = Object.keys(SIDEBAR_NAV_ITEMS).find(path => location.pathname.startsWith(path)); const currentItem = Object.keys(SIDEBAR_NAV_ITEMS).find(path => location.pathname.startsWith(path));
return currentItem && SIDEBAR_NAV_ITEMS[currentItem]; return currentItem && SIDEBAR_NAV_ITEMS[currentItem];
} };
class Layout extends React.Component { class Layout extends React.Component {
constructor(props) { constructor(props) {
@ -114,11 +112,11 @@ class Layout extends React.Component {
renderNav() { renderNav() {
return (<Nav className="d-md-down-none" navbar> return (<Nav className="d-md-down-none" navbar>
{sidebarNavItems.items.map((item) => { {HEADER_NAV_ITEMS.map((item) => {
return ( return (
<NavItem className="px-3" key={item.url}> <NavItem className="px-3" key={item.to}>
<NavLink href={item.url}> <NavLink exact tag={Link} to={item.to}>
<i className={item.icon}>&nbsp;</i> <FontAwesome className="mr-2" name={item.icon} />
{item.name} {item.name}
</NavLink> </NavLink>
</NavItem> </NavItem>
@ -155,16 +153,6 @@ class Layout extends React.Component {
</AppHeaderDropdown>); </AppHeaderDropdown>);
} }
renderSideBar() {
return (<AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<AppSidebarNav navConfig={sidebarNavItems} location={this.props.location} />
<AppSidebarFooter />
<AppSidebarMinimizer />
</AppSidebar>);
}
renderFooter() { renderFooter() {
return (<AppFooter> return (<AppFooter>
<span className="ml-auto"> <span className="ml-auto">
@ -177,16 +165,18 @@ class Layout extends React.Component {
} }
render() { render() {
const {children, searchResult} = this.props; const {children, searchResult, location} = this.props;
const sidebar = getSidebar(location);
if (!sidebar) {
removeCssClasses();
}
return (<div className="app animated fadeIn"> return (<div className="app animated fadeIn">
<AppHeader fixed> <AppHeader fixed>
<AppSidebarToggler className="d-lg-none" display="md" mobile /> <AppNavbarBrand className="mx-3"
<AppNavbarBrand
full={{src: logo, width: 50, height: 50, alt: 'Embark Logo'}} full={{src: logo, width: 50, height: 50, alt: 'Embark Logo'}}
minimized={{src: logo, width: 30, height: 30, alt: 'Embark Logo'}} minimized={{src: logo, width: 30, height: 30, alt: 'Embark Logo'}}
/> />
<AppSidebarToggler className="d-md-down-none" display="lg" />
{this.renderNav()} {this.renderNav()}
@ -194,7 +184,15 @@ class Layout extends React.Component {
</AppHeader> </AppHeader>
<div className="app-body"> <div className="app-body">
{this.renderSideBar()} {sidebar &&
<AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<AppSidebarNav navConfig={sidebar} location={location} />
<AppSidebarFooter />
<AppSidebarMinimizer />
</AppSidebar>
}
<main className="main"> <main className="main">
{searchResult.error && this.state.searchError && <Alert color="danger">{searchResult.error} {searchResult.error && this.state.searchError && <Alert color="danger">{searchResult.error}

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Form, FormGroup, Input, Button, Row, Col} from 'reactstrap'; import {Form, FormGroup, Input, Button} from 'reactstrap';
import FontAwesome from 'react-fontawesome'; import FontAwesome from 'react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Card, CardBody, CardFooter } from 'reactstrap'; import { Card, CardBody } from 'reactstrap';
import classNames from 'classnames'; import classNames from 'classnames';
import { mapToCssModules } from 'reactstrap/lib/utils'; import { mapToCssModules } from 'reactstrap/lib/utils';