Mixing
making sidebar is responsive is not working correct in react?
0
Problem:
I have created a header component and sidebar component with light boostrap dashbord template..
This is my header component.
import React, { PureComponent } from "react";
class Header extends PureComponent {
constructor(props) {
super(props);
this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
this.state = {
sidebarExists: false
};
}
mobileSidebarToggle(e) {
if (this.state.sidebarExists === false) {
this.setState({
sidebarExists: true
});
}
e.preventDefault();
document.documentElement.classList.toggle("nav-open");
var node = document.createElement("div");
node.id = "bodyClick";
node.onclick = function() {
this.parentElement.removeChild(this);
document.documentElement.classList.toggle("nav-open");
};
document.body.appendChild(node);
}
render() {
return (
<nav className="navbar navbar-expand-lg" color-on-scroll="500">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Dashbord
</a>
<button
onclick={this.mobileSidebarToggle()}
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="colapse"
aria-controls="navigation-index"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
</button>
<div
className="collapse navbar-collapse justify-content-end"
id="navigation"
>
<ul className="nav navbar-nav mr-auto">
<li className="nav-item">
<a href="#" className="nav-link" data-toggle="dropdown">
<span className="d-lg-none">Dashboard</span>
</a>
</li>
<li className="dropdown nav-item">
<a
href="#"
className="dropdown-toggle nav-link"
data-toggle="dropdown"
>
<i className="nc-icon nc-planet" />
<span className="d-lg-none">Notification</span>
</a>
<ul className="dropdown-menu" />
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#pablo">
<span className="no-icon">
<i
class="fas fa-user-circle"
style={{ marginRight: "5px" }}
/>
Admin
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Header;
This is my sidebar component looks.
import React, { PureComponent } from "react";
import imagine from "../../assets/img/sidebar-3.jpg";
class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.state = {
width: window.innerWidth
};
}
activeRoute(routeName) {
return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
}
updateDimensions() {
this.setState({ width: window.innerWidth });
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
render() {
const sidebarBackground = {
backgroundImage: "url(" + imagine + ")"
};
return (
<div className="sidebar" data-image={imagine} id="sidebar">
<div className="sidebar-background" style={sidebarBackground} />
<div className="sidebar-wrapper">
<div className="logo">
<a href="" className="simple-text">
<img
src="../../images/favicon.png"
style={{ maxHeight: "50px" }}
/>
Trafficfine
</a>
</div>
<ul className="nav">
<li className="nav-item active">
<a className="nav-link" href="#">
<i className="fas fa-tachometer-alt" />
<p>Dashboard</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-briefcase" />
<p>Officers</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-times-circle" />
<p>Offences</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-bus-alt" />
<p>Drivers</p>
</a>
</li>
</ul>
</div>
</div>
);
}
}
export default Sidebar;
And here I am Providing the dashbord component where I am using this Both component.
import React, { PureComponent } from "react";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/demo.css";
import "../../assets/css/light-bootstrap-dashboard.css";
import "./font-awesome-min.css";
import "./fonts.css";
import "./dashbord.css";
import Sidebar from "./Sidebar";
import Header from "./Header";
import Footer from "./Footer";
class Dashbord extends PureComponent {
render() {
return (
<div className="wrapper">
<div className="sidebar-background">
<Sidebar />
</div>
<div className="main-panel">
<Header />
<div class="content" />
<Footer />
</div>
</div>
);
}
}
export default Dashbord;
But this not working it is giving me an error. I tried so many ways but it is not working as expected. Can someone help me to make this responsive?. Thank you!!
reactjs twitter-bootstrap
asked Nov 21 '18 at 6:19
dwpdwp
11710
add a comment |
0
Problem:
I have created a header component and sidebar component with light boostrap dashbord template..
This is my header component.
import React, { PureComponent } from "react";
class Header extends PureComponent {
constructor(props) {
super(props);
this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
this.state = {
sidebarExists: false
};
}
mobileSidebarToggle(e) {
if (this.state.sidebarExists === false) {
this.setState({
sidebarExists: true
});
}
e.preventDefault();
document.documentElement.classList.toggle("nav-open");
var node = document.createElement("div");
node.id = "bodyClick";
node.onclick = function() {
this.parentElement.removeChild(this);
document.documentElement.classList.toggle("nav-open");
};
document.body.appendChild(node);
}
render() {
return (
<nav className="navbar navbar-expand-lg" color-on-scroll="500">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Dashbord
</a>
<button
onclick={this.mobileSidebarToggle()}
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="colapse"
aria-controls="navigation-index"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
</button>
<div
className="collapse navbar-collapse justify-content-end"
id="navigation"
>
<ul className="nav navbar-nav mr-auto">
<li className="nav-item">
<a href="#" className="nav-link" data-toggle="dropdown">
<span className="d-lg-none">Dashboard</span>
</a>
</li>
<li className="dropdown nav-item">
<a
href="#"
className="dropdown-toggle nav-link"
data-toggle="dropdown"
>
<i className="nc-icon nc-planet" />
<span className="d-lg-none">Notification</span>
</a>
<ul className="dropdown-menu" />
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#pablo">
<span className="no-icon">
<i
class="fas fa-user-circle"
style={{ marginRight: "5px" }}
/>
Admin
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Header;
This is my sidebar component looks.
import React, { PureComponent } from "react";
import imagine from "../../assets/img/sidebar-3.jpg";
class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.state = {
width: window.innerWidth
};
}
activeRoute(routeName) {
return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
}
updateDimensions() {
this.setState({ width: window.innerWidth });
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
render() {
const sidebarBackground = {
backgroundImage: "url(" + imagine + ")"
};
return (
<div className="sidebar" data-image={imagine} id="sidebar">
<div className="sidebar-background" style={sidebarBackground} />
<div className="sidebar-wrapper">
<div className="logo">
<a href="" className="simple-text">
<img
src="../../images/favicon.png"
style={{ maxHeight: "50px" }}
/>
Trafficfine
</a>
</div>
<ul className="nav">
<li className="nav-item active">
<a className="nav-link" href="#">
<i className="fas fa-tachometer-alt" />
<p>Dashboard</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-briefcase" />
<p>Officers</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-times-circle" />
<p>Offences</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-bus-alt" />
<p>Drivers</p>
</a>
</li>
</ul>
</div>
</div>
);
}
}
export default Sidebar;
And here I am Providing the dashbord component where I am using this Both component.
import React, { PureComponent } from "react";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/demo.css";
import "../../assets/css/light-bootstrap-dashboard.css";
import "./font-awesome-min.css";
import "./fonts.css";
import "./dashbord.css";
import Sidebar from "./Sidebar";
import Header from "./Header";
import Footer from "./Footer";
class Dashbord extends PureComponent {
render() {
return (
<div className="wrapper">
<div className="sidebar-background">
<Sidebar />
</div>
<div className="main-panel">
<Header />
<div class="content" />
<Footer />
</div>
</div>
);
}
}
export default Dashbord;
But this not working it is giving me an error. I tried so many ways but it is not working as expected. Can someone help me to make this responsive?. Thank you!!
reactjs twitter-bootstrap
asked Nov 21 '18 at 6:19
dwpdwp
11710
add a comment |
0
0
0
Problem:
I have created a header component and sidebar component with light boostrap dashbord template..
This is my header component.
import React, { PureComponent } from "react";
class Header extends PureComponent {
constructor(props) {
super(props);
this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
this.state = {
sidebarExists: false
};
}
mobileSidebarToggle(e) {
if (this.state.sidebarExists === false) {
this.setState({
sidebarExists: true
});
}
e.preventDefault();
document.documentElement.classList.toggle("nav-open");
var node = document.createElement("div");
node.id = "bodyClick";
node.onclick = function() {
this.parentElement.removeChild(this);
document.documentElement.classList.toggle("nav-open");
};
document.body.appendChild(node);
}
render() {
return (
<nav className="navbar navbar-expand-lg" color-on-scroll="500">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Dashbord
</a>
<button
onclick={this.mobileSidebarToggle()}
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="colapse"
aria-controls="navigation-index"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
</button>
<div
className="collapse navbar-collapse justify-content-end"
id="navigation"
>
<ul className="nav navbar-nav mr-auto">
<li className="nav-item">
<a href="#" className="nav-link" data-toggle="dropdown">
<span className="d-lg-none">Dashboard</span>
</a>
</li>
<li className="dropdown nav-item">
<a
href="#"
className="dropdown-toggle nav-link"
data-toggle="dropdown"
>
<i className="nc-icon nc-planet" />
<span className="d-lg-none">Notification</span>
</a>
<ul className="dropdown-menu" />
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#pablo">
<span className="no-icon">
<i
class="fas fa-user-circle"
style={{ marginRight: "5px" }}
/>
Admin
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Header;
This is my sidebar component looks.
import React, { PureComponent } from "react";
import imagine from "../../assets/img/sidebar-3.jpg";
class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.state = {
width: window.innerWidth
};
}
activeRoute(routeName) {
return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
}
updateDimensions() {
this.setState({ width: window.innerWidth });
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
render() {
const sidebarBackground = {
backgroundImage: "url(" + imagine + ")"
};
return (
<div className="sidebar" data-image={imagine} id="sidebar">
<div className="sidebar-background" style={sidebarBackground} />
<div className="sidebar-wrapper">
<div className="logo">
<a href="" className="simple-text">
<img
src="../../images/favicon.png"
style={{ maxHeight: "50px" }}
/>
Trafficfine
</a>
</div>
<ul className="nav">
<li className="nav-item active">
<a className="nav-link" href="#">
<i className="fas fa-tachometer-alt" />
<p>Dashboard</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-briefcase" />
<p>Officers</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-times-circle" />
<p>Offences</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-bus-alt" />
<p>Drivers</p>
</a>
</li>
</ul>
</div>
</div>
);
}
}
export default Sidebar;
And here I am Providing the dashbord component where I am using this Both component.
import React, { PureComponent } from "react";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/demo.css";
import "../../assets/css/light-bootstrap-dashboard.css";
import "./font-awesome-min.css";
import "./fonts.css";
import "./dashbord.css";
import Sidebar from "./Sidebar";
import Header from "./Header";
import Footer from "./Footer";
class Dashbord extends PureComponent {
render() {
return (
<div className="wrapper">
<div className="sidebar-background">
<Sidebar />
</div>
<div className="main-panel">
<Header />
<div class="content" />
<Footer />
</div>
</div>
);
}
}
export default Dashbord;
But this not working it is giving me an error. I tried so many ways but it is not working as expected. Can someone help me to make this responsive?. Thank you!!
reactjs twitter-bootstrap
asked Nov 21 '18 at 6:19
dwpdwp
11710
Problem:
I have created a header component and sidebar component with light boostrap dashbord template..
This is my header component.
import React, { PureComponent } from "react";
class Header extends PureComponent {
constructor(props) {
super(props);
this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
this.state = {
sidebarExists: false
};
}
mobileSidebarToggle(e) {
if (this.state.sidebarExists === false) {
this.setState({
sidebarExists: true
});
}
e.preventDefault();
document.documentElement.classList.toggle("nav-open");
var node = document.createElement("div");
node.id = "bodyClick";
node.onclick = function() {
this.parentElement.removeChild(this);
document.documentElement.classList.toggle("nav-open");
};
document.body.appendChild(node);
}
render() {
return (
<nav className="navbar navbar-expand-lg" color-on-scroll="500">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Dashbord
</a>
<button
onclick={this.mobileSidebarToggle()}
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="colapse"
aria-controls="navigation-index"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
<span className="navbar-toggler-bar burger-lines" />
</button>
<div
className="collapse navbar-collapse justify-content-end"
id="navigation"
>
<ul className="nav navbar-nav mr-auto">
<li className="nav-item">
<a href="#" className="nav-link" data-toggle="dropdown">
<span className="d-lg-none">Dashboard</span>
</a>
</li>
<li className="dropdown nav-item">
<a
href="#"
className="dropdown-toggle nav-link"
data-toggle="dropdown"
>
<i className="nc-icon nc-planet" />
<span className="d-lg-none">Notification</span>
</a>
<ul className="dropdown-menu" />
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#pablo">
<span className="no-icon">
<i
class="fas fa-user-circle"
style={{ marginRight: "5px" }}
/>
Admin
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Header;
This is my sidebar component looks.
import React, { PureComponent } from "react";
import imagine from "../../assets/img/sidebar-3.jpg";
class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.state = {
width: window.innerWidth
};
}
activeRoute(routeName) {
return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
}
updateDimensions() {
this.setState({ width: window.innerWidth });
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
render() {
const sidebarBackground = {
backgroundImage: "url(" + imagine + ")"
};
return (
<div className="sidebar" data-image={imagine} id="sidebar">
<div className="sidebar-background" style={sidebarBackground} />
<div className="sidebar-wrapper">
<div className="logo">
<a href="" className="simple-text">
<img
src="../../images/favicon.png"
style={{ maxHeight: "50px" }}
/>
Trafficfine
</a>
</div>
<ul className="nav">
<li className="nav-item active">
<a className="nav-link" href="#">
<i className="fas fa-tachometer-alt" />
<p>Dashboard</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-briefcase" />
<p>Officers</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-times-circle" />
<p>Offences</p>
</a>
</li>
<li>
<a className="nav-link" href="">
<i className="fas fa-bus-alt" />
<p>Drivers</p>
</a>
</li>
</ul>
</div>
</div>
);
}
}
export default Sidebar;
And here I am Providing the dashbord component where I am using this Both component.
import React, { PureComponent } from "react";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/demo.css";
import "../../assets/css/light-bootstrap-dashboard.css";
import "./font-awesome-min.css";
import "./fonts.css";
import "./dashbord.css";
import Sidebar from "./Sidebar";
import Header from "./Header";
import Footer from "./Footer";
class Dashbord extends PureComponent {
render() {
return (
<div className="wrapper">
<div className="sidebar-background">
<Sidebar />
</div>
<div className="main-panel">
<Header />
<div class="content" />
<Footer />
</div>
</div>
);
}
}
export default Dashbord;
But this not working it is giving me an error. I tried so many ways but it is not working as expected. Can someone help me to make this responsive?. Thank you!!
reactjs twitter-bootstrap
reactjs twitter-bootstrap
asked Nov 21 '18 at 6:19
dwpdwp
11710
asked Nov 21 '18 at 6:19
dwpdwp
11710
asked Nov 21 '18 at 6:19
dwpdwp
11710
asked Nov 21 '18 at 6:19
dwpdwp
11710
asked Nov 21 '18 at 6:19
dwpdwp
11710
11710
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406286%2fmaking-sidebar-is-responsive-is-not-working-correct-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406286%2fmaking-sidebar-is-responsive-is-not-working-correct-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
