0
아이콘을 클릭하면 열리는 사이드 메뉴가 있으며 페이지를 클릭하거나 메뉴의 항목을 클릭하면 닫힙니다. 자물쇠 아이콘을 클릭하면 메뉴 항목이나 페이지를 클릭해도 메뉴가 닫히지 않으므로 자물쇠를 구현하려고합니다.메뉴 반응을 잠그거나 막지 않기
잠긴 아이콘에서 잠기지 않은 아이콘으로 변경 아이콘을 설정할 수 있었지만 닫기를 중지하는 기능에 문제가 있습니다. 어떤 도움이나 제안이 굉장 할 것입니다. https://codesandbox.io/s/pw6q46jp20
class SideBar extends Component {
constructor(props) {
super(props);
this.state = {
category: props.category,
currentPage: {
backgroundColor: '#383838',
color: '#A9A9A9',
},
menuLocked: false,
menuOpen: false,
selectedIcon: null,
};
}
handleIconClick = (category) => {
this.setState({
category,
menuOpen: true,
selectedIcon: category,
});
};
handleMenuItemClick = (category) => {
this.setState({
menuOpen: false,
selectedIcon: '',
currentPage: category,
});
}
handlePageClick =() => {
this.setState({
menuOpen: false,
});
}
handleMenuLock =() => {
this.setState({ menuLocked: !this.state.menuLocked });
}
render() {
return (
<div>
<TopBar {...this.props} />
<Container>
<SideNav>
<ListWrapper>
<IconList
currentPage={this.state.currentPage}
openMenu={this.handleIconClick}
selectedIcon={this.state.selectedIcon}
visible={this.state.menuOpen}
/>
</ListWrapper>
</SideNav>
<PageContentWrapper>
<Sidebar.Pushable>
<PushMenu
category={this.state.category}
closeOnItemClick={this.handleMenuItemClick}
handleMenuLock={this.handleMenuLock}
menuLocked={this.state.menuLocked}
params={this.props.params}
visible={this.state.menuOpen}
/>
<Sidebar.Pusher
onClick={this.handlePageClick}>
<Segment basic>
{this.props.children || <Home />}
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</PageContentWrapper>
</Container>
</div>
);
}
}
SideBar.propTypes = {
children: PropTypes.any,
params: PropTypes.any,
category: PropTypes.any,
};
export default SideBar;class PushMenu extends React.Component {
render() {
const category = sideNavData.lookupCategory(this.props.category);
const menuLockButton = !this.props.menuLocked
? <Icon
link={true}
name='unlock'
size='big'
/>
: <Icon
link={true}
name='lock'
size='big'
/>;
return (
<Sidebar
className='Push-menu'
animation='push'
width='thin'
visible={this.props.visible}
>
<Header>{this.props.category}</Header>
<Linebreak />
{
Object.keys(category).map((subCategory, index) => {
return (
<div key={index}>
<SubcategoryHeader>{subCategory}</SubcategoryHeader>
<List>
{
Object.keys(category[subCategory]).map((item, index) => (
<li key={index}>
<ListLink>
<Link
to={`/${this.props.category}/${subCategory}/${category[subCategory][item].name}`}
activeStyle={{ color: '#FFFFFF' }}
onClick={() => {
this.props.closeOnItemClick(this.props.category);
}}
>
{category[subCategory][item].name}
</Link>
</ListLink>
</li>
))
}
</List>
<LockButtonWrapper onClick={this.props.handleMenuLock}>
{menuLockButton}
</LockButtonWrapper>
</div>
);
})
}
</Sidebar>
);
}
}
PushMenu.propTypes = {
category: PropTypes.any,
closeOnItemClick: PropTypes.func,
currentPage: PropTypes.func,
handleMenuLock: PropTypes.func,
menuLocked: PropTypes.bool,
visible: PropTypes.bool,
};
export default PushMenu;
감사합니다. – StuffedPoblano