I want to implement a nav bar on my site that has some actions with JavaScript, but I don't know how to implement the JavaScript in the render of my component.
This is the code in JavaScript:
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
And this my component in ReactJS:
import React from 'react';
class LateralMenu extends React.Component {
render() {
return (
<nav className="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul className="nav sidebar-nav">
<li className="sidebar-brand">
<a href="#">
Bootstrap 3
</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-home" /> Home</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-folder" /> Page one</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-file-o" /> Second page</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-cog" /> Third page</a>
</li>
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown"><i className="fa fa-fw fa-plus"/> Dropdown <span className="caret"></span></a>
<ul className="dropdown-menu" role="menu">
<li className="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-bank" /> Page four</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-dropbox" /> Page 5</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-twitter" /> Last page</a>
</li>
</ul>
</nav>
);
}
}
export default LateralMenu;
From what I see, you have implemented a sidebar and through a hamburger button you alternate its visibility.
That leaves out other options like Redux. However, there are times when simple solutions are in front of us and we always opt for the complex.
To do what you want, you only need to know a couple of things:
context
React was built to break down the UI into small, reusable modules. Instead of having the entire UI in a single HTML file, you break that file into small chunks and turn them into components . The same approach is used in other frameworks like Vue.js 2, Ember.js and Angular 2.
Let's assume the following scenario; our UI is composed of 4 elements:
And all this makes up the 5th component, the
Dashboard
.dashboard
The important part here is
Dashboard.childContextTypes
andgetChildContext
. When usedcontext
, you can share properties downwards ; that is, a parent shares properties with its children, which can range from text to functions.By means of
childContextTypes
you specify the properties that are going to be shared and, in addition, the type of each one of them. You can see the list of types here . It is mandatory to provide a default value for them, and this is done viagetChildContext
.The property
sidebarVisible
indicates the state of the sidebar andtoggleSidebar
is a function that changes the state and therefore causes the component to be updated, as well as the propertysidebarVisible
, alternating betweentrue
andfalse
.side bar
The children must also define the types they wish to have available in
context
it and this is done viacontextTypes
. By doing this you will have availablesidebarVisible
in the objectcontext
(this.context
).When the state is updated
sidebarVisible
,Dashboard
what will happen is that the value of will also be updatedcontext
and it will be reflected in all the children. In this component we capture the new onecontext
thanks to the life cycle methodcomponentWillUpdate
and we update the state with the new value of thecontext
. What will happen next is that updating the stateSidebar
will re-render the component and the lineclasses += this.state.visible ? 'visible' : '';
will returnvisible
o empty, which will make the menu visible or invisible via the CSS classvisible
.Top
Main
Demonstration
Full code (demo below):
You can see the code at work in this Pen .