const SideMenu = styled.div` background-color: #0e0e10; padding-top: 1rem; width: 317px; `; const HorizontalSeparatorLine = styled.div` background-color: "#BF4F74"; width: 317px; height: 1px; background-color: #282933; margin-top: 1rem; margin-bottom: 1rem; `; const handleCreatePage = useCallback( (isPrivate) => { props.onOpenCreatePage(isPrivate); }, [props.createPageOpen] ); return ( <SideMenu> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.Header"} props={{ title: "Shared Pages", onChange: () => handleCreatePage(false), componentName: "CreateArticle", }} /> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.AllArticlesList"} /> <HorizontalSeparatorLine /> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.Header"} props={{ title: "Settings", }} /> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.SettingsList"} /> </SideMenu> );