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={`fran-cali.testnet/widget/Calimero.DocsChain.Sidebar.Header`} props={{ componentOwnerId: props.componentOwnerId, title: "Shared Pages", onChange: () => handleCreatePage(false), componentName: "CreateArticle", }} /> <Widget src={`fran-cali.testnet/widget/Calimero.DocsChain.Sidebar.AllArticlesList`} props={{ componentOwnerId: props.componentOwnerId, }} /> <HorizontalSeparatorLine /> <Widget src={`fran-cali.testnet/widget/Calimero.DocsChain.Sidebar.Header`} props={{ componentOwnerId: props.componentOwnerId, title: "Settings", }} /> <Widget src={`fran-cali.testnet/widget/Calimero.DocsChain.Sidebar.SettingsList`} props={{ componentOwnerId: props.componentOwnerId, }} /> </SideMenu> );