I am new to react and am using react-bootstrap-sidebar in my project.
What I want is side subbar menu something like this Report>MIS Report.
My Report
The code I am using is this:
import {Navbar, Nav, NavItem, Button, Glyphicon} from 'react-bootstrap';
import React, {Component} from 'react';
import Sidebar from 'react-bootstrap-sidebar';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false,
};
}
updateModal(isVisible) {
this.state.isVisible = isVisible;
this.forceUpdate();
}
render() {
return (
<div>
<Button bsStyle="primary" onClick={ () => this.updateModal(true) }><Glyphicon glyph="menu-hamburger"/></Button>
<Sidebar side='left' isVisible={ this.state.isVisible } onHide={ () => this.updateModal(false) }>
<Nav>
<NavItem href="#">Link 1</NavItem>
<NavItem href="#">Link 2</NavItem>
<NavItem href="#">Link 3</NavItem>
<NavItem href="#">Link 4</NavItem>
</Nav>
</Sidebar>
</div>
);
}
}
How do I implement sub menus in this sidebar.
Related
I have been trying to put a Navbar into a React Project using reactstrap. But the Navbar is not showing just the h1 in the NavbarBrand is rendered for some reasons. I tried to change the css styling, copy and pasted other example Navbars from different websites and tried other kinda similar solutions from here but nothing worked. I am using React version 17.0.2 and reactstrap version 8.9.0.
This is my Navbar Component:
import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false
};
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<Navbar bg="dark" variant="dark">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand href="/">
<h1>Navbar</h1>
</NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
}
export default Header;
How the navbar looks
I am rather new to React and Javascript overall i hope someone can help me.
You have the isNavOpen in state set to false and your
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
depends upon isNavOpen state which expects to be true to be shown on the screen.
Try setting isNavOpen to true in the state.
In my main container the layout has this code
import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';
class Layout extends Component {
state = {
showSideBar: true
}
sideBarToggleHandler = () => {
console.log("test");
}
render() {
return (
<div>
<Header />
<div>
<SideBar onClick={this.sideBarToggleHandler}/>
<main id="main">
{this.props.children}
</main>
</div>
</div>
)
}
}
export default Layout;
Whenever I click on any element in the side bar I want to console log test
For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine
This is my sidebar:
import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {
}
return (
<div className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
};
export default sideBar;
and this is my navigation items:
import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faHome } from '#fortawesome/free-solid-svg-icons';
import { faFileAlt } from '#fortawesome/free-solid-svg-icons';
import { faChartLine } from '#fortawesome/free-solid-svg-icons';
library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);
const navigationItems = (props) => {
return (
<Aux>
<p>CONSUMER</p>
<ul className={classes.NavigationItems}>
<li><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</li>
<li><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</li>
<li><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</li>
</ul>
<div className={classes.Divider}></div>
<div className={classes.ButtonPosition}>
<button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
</div>
<div className={classes.Divider + ' ' + classes.DividerBottom}></div>
<p className={classes.footer}>Micheal Alfa v 1.0.0</p>
<p className={classes.footer}>Copyrights # 2019 All Rights Reserved</p>
</Aux>
);
};
export default navigationItems;
Any ideas?
Thank you
You are not doing anything with the passed onClick event. You need to put it on something, like so:
const sideBar = (props) => (
<div onClick={this.props.onClick} className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
export default sideBar;
This will fire that event when you click on the div. Make sense?
I am Learning the routing system in React . I checked everything in my code and it seems to be correct but I don't know why it does not work.
Versions:
"react-router-dom": "4.2.2",
"react": "^16.8.4",
index.js
We go to the App.js from index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
We implement BrowserRouter in App.js
import React, { Component } from 'react';
import { BrowserRouter} from 'react-router-dom';
import Main from './components/MainComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
We define Routes in MainComponent.js
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
const HomePage = () => {
return(
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default Main;
HeaderComponent.js
NavBar, Nav in HeaderComponent.js
import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.toggleNav = this.toggleNav.bind(this);
this.state = {
isNavOpen: false
};
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<div>
<Navbar dark expand="md">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink className="nav-link" to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<div className="row row-header">
<div className="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
</div>
</div>
</Jumbotron>
</div>
);
}
}
export default Header;
It works when I give the part inside app.js but it shows blank screen when it is put in another file navbar.js and imported. If the code in navbar.js is directly added in app.js instead of importing, it works fine and navbar appears. Otherwise blank screen appears.
index.js is shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.js file
import React, { Component } from 'react';
import navbar from './navbar.js';
class home extends Component {
render() {
return (
<div>
<navbar />
</div>
);
}
}
export default home;
navbar.js file:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
class navbar extends Component{
render() {
return (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default navbar;
Please help, thanks in advance.
You should always start the name of your custom React components with
a uppercase letter.
import React, { Component } from 'react';
import Navbar from './Navbar.js';
class Home extends Component {
render() {
return (
<div>
<Navbar />
</div>
);
}
}
export default Home;
and it's recommended to use the same name for the file name as well. So it should be ./Navbar.js instead of ./navbar.js
Read this page from the official documentation for more information.
Always start component names with a capital letter. For example, <div/> represents a DOM tag, but <Welcome /> represents a component and
requires Welcome to be in scope.
I am confused by this line in the documentation for redux-burger-menu:
https://negomi.github.io/redux-burger-menu/
Decorate your menu component:
// Menu.js
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
export default reduxBurgerMenu(Menu);
The component you export from the above file can then be used just like react-burger-menu.
How do I import this component and use it just like react-burger-menu?
I have a NarrativeMenu here:
class NarrativeMenu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<Menu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a onClick={ this.showSettings } className="menu-item--small" href="">Settings</a>
</Menu>
);
}
}
How can I use it with redux burger menu?
I also found it a bit confusing. I made it work like this:
Menu.js:
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
const ReduxBurgerMenu = reduxBurgerMenu(Menu);
export default ReduxBurgerMenu;
ExampleMenu.js:
import React from 'react';
import ReduxBurgerMenu from './Menu';
class ExampleMenu extends React.Component {
render () {
return (
<ReduxBurgerMenu isOpen={ this.props.isOpen }>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
</ReduxBurgerMenu>
);
}
}
export default ExampleMenu;
and then use it like this:
import ExampleMenu from 'ExampleMenu'
...
render () {
return (
<div id="outer-container">
<Header />
<ExampleMenu pageWrapId={"page-wrap"} outerContainerId={"outer-container"} />
<div id="page-wrap">
...
</div>
</div>
)
}
...
To simplify Jan Caals example.
ExampleMenu.js
import React from 'react';
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
const ReduxBurgerMenu = reduxBurgerMenu(Menu);
class ExampleMenu extends React.Component {
render () {
return (
<ReduxBurgerMenu isOpen={ this.props.isOpen }>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
</ReduxBurgerMenu>
);
}
}
export default ExampleMenu;