If i click any sidebar links after i want to close sidebar in reactjs

Question

Is this possible

Answer 1

It's Possible. Please share your code.

Answer 2

Hariprakash Don't only share partially, full codes please.

Answer 3

Hariprakash you should upload codes to github, then share the github link here.

You couldn't share multi files structure contents to all over the posts here.

Answer 4

Calvin

Answer 5

sidebarlink.js

Answer 6

import React, { Component } from "react";
import {
Collapse,
Divider,
List,
ListItem,
ListItemIcon,
ListItemText,
Typography,
withStyles,
} from "@material-ui/core";
import { Link } from "react-router-dom";
import classnames from "classnames";
import ExpandLess from "@material-ui/icons/Remove";
import ExpandMore from "@material-ui/icons/Add";

import DashboardIcon from "../../../Icons/Dashboard";
import LearningInstance from "../../../Icons/Outline";

import Dot from "../Dot";

class SidebarLink extends Component {
constructor() {
super();

this.state = {
isOpen: false,
};
}

iconCollection(key) {
const collection = {
dashboard: (
<DashboardIcon
width="32px"
height="32px"
onClick={this.toggleCollapse}
/>
),
LearningInstance: <LearningInstance width="32px" height="32px" />,
// resultProcessing: <BatchProcessingIcon width="32px" height="32px" />,
// assessorManager: <AssessorIcon width="32px"

Answer 7

// qbManager: <QbManagerIcon width="32px" height="32px" />,
// batchRunning: <BatchRunningIcon width="32px" height="32px" />,
// userManager: <UserManagerIcon width="32px" height="32px" />,
// addQuestion: <AddQuestionIcon width="32px" height="32px" />,
// disabledQuestion: <DisabledQuestionIcon width="32px" height="32px" />,
// master: <Master width="32px" height="32px" />,
// rejectedQuestion: <RejectedQuestionIcon width="32px" height="32px" />,
// questionBank: <QuestionBankIcon width="32px" height="32px" />,
// changePassword: <ChangePassword width="32px" height="32px" />,
// questionDashboard: <QuestionDashboard width="32px" height="32px" />,
// questionManager: <QuestionManager width="32px" height="32px" />,
// reports: <SkillReportIcon width="32px" height="32px" />,
};
return collection[key];
}

toggleCollapse() {
if (this.props.isSidebarOpened) {
this.setState({ isOpen: !this.state.isOpen });
}
}

childrenM

Answer 8

childrenMap(child) {
const { classes, theme } = this.props;
let child_array = [];
for (let key in child) {
child_array.push(
<SidebarLink
onClick={this.togglelink}
key={key}
isSidebarOpened={this.props.isSidebarOpened}
classes={classes}
theme={theme}
nested
{...child[key]}
/>
);
}
return child_array;
}
render() {
const { classes, theme } = this.props;

if (!this.props.children)
return (
<ListItem
button
component={this.props.url && Link}
to={this.props.url}
className={classes.link}
classes={{
root: classnames(classes.linkRoot, {
[classes.linkActive]:
this.props.isLinkActive && !this.props.nested,
[classes.linkNested]: this.props.nested,
}),
}}
disableRipple
>

Answer 9

<ListItemIcon
className={classnames(classes.linkIcon, {
[classes.linkIconActive]: this.props.isLinkActive,
})}
>
{this.props.nested ? (
<Dot
style={{ width: 13, opacity: 0.5 }}
color={this.props.isLinkActive && "primary"}
/>
) : (
this.props.icon
)}
</ListItemIcon>
<ListItemText
classes={{
primary: classnames(classes.linkText, {
[classes.linkTextActive]: this.props.isLinkActive,
[classes.linkTextHidden]: !this.props.isSidebarOpened,
}),
}}
primary={this.props.name}
/>
</ListItem>
);

return (
<React.Fragment>
<ListItem
toggleSidebars={this.toggleSidebarlink}
showSidebar={this.state.showSidebar}
button
component={this.props.url && Link}
onClick={this.