How to indent list and sublist menu? - html

Question

I am trying to style the list and sublist menu. Some list items have name and some list items having sublist items having svg added infront of list item. in doing so, the list item without sublist item is not indented correctly. how can i achieve it. could somebody help me. Below is what i have tried.
return (
{this.props.expanded &&
<Drawer className="drawer">
<header>
<h4>List items</h4>
</header>
<ListItems listitemss={this.props.listitems} />
</Drawer>
}
</div>
);
};
}
class ListItemss extends React.PureComponent {
render() {
return <ul className="listitems_list">
<div className="lists">
{this.props.layers.map((list, index) => {
return <List key={index} list={list} />
})}
</div>
</ul>
}
}
class List extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
expanded: false,
hidden: false,
};
}
expand = () => {
this.setState({expanded: true});
};
collapse = () => {
this.setState({expanded: false});
};
hide_layer = () => {
this.setState({hidden: true});
};
show_layer = () => {
this.setState({hidden: false});
};
render() {
return <li>
<div className="list">
{this.props.list.children && !this.state.expanded &&
<SvgAccDown width="14" height="8" onClick={this.expand} />
}
{this.props.list.children && this.state.expanded &&
<SvgAccUp width="20" height="18" onClick={this.collapse} />
}
<span>{this.props.list.name}</span>
</div>
{this.props.list.children && this.state.expanded &&
<ListItems lists={this.props.list.children}/>
}
</li>;
}
}
.listitems_list {
height: 100%;
overflow: auto;
.lists {
height: 100%;
margin-left: 12px;
overflow: auto;
.list {
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
span {
padding-right: 12px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 2px;
font-size: 16px;
font-weight: bold;
}
}
}
}

Answer 1

If it is an external CSS file, and you are using something like Create React App, you can just import 'mystyle.css;`