const HorizontalSeparatorLine = styled.div` background-color: "#BF4F74"; height: 1px; background-color: #282933; margin-top: 1rem; margin-bottom: 1rem; @media (max-width: 1024px) { width: 100%; } `; const SideMenu = styled.div` background-color: #0e0e10; padding-top: 1rem; width: 318px; overflow-y: scroll; height: calc(100vh - 169px); @media (max-width: 1024px) { display: none; } `; const SideMenuMobile = styled.div` display: none; background-color: #0e0e10; padding-top: 1rem; overflow-y: scroll; @media (max-width: 1024px) { display: block; position: relative; z-index: 10; padding-top: 2px; width: 100%; height: calc(100vh - 64px); } `; const [users, channels] = useMemo(() => { const users = props.usersList.map((u) => ({ ...u, unreadMessages: props.unreadMessages.chats[u.id] || 0, })); const channels = props.channelList.map((c) => ({ ...c, unreadMessages: props.unreadMessages.channels[c.name] || 0, })); return [users, channels]; }, [props.usersList, props.channelList, props.unreadMessages]); const handleCreateChannel = useCallback(() => { console.log("handleCreateChannel"); props.onChangeChannelDialog(!props.openCreateChannel); }, [props.openCreateChannel]); const SideMenuContent = () => { return ( <> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelsHeader`} props={{ title: "Channel", onChange: handleCreateChannel, componentOwnerId: props.componentOwnerId, }} /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelList`} props={{ channels, selectChannel: props.onChannelSelected, selectedChannelId: props.selectedChannel, componentOwnerId: props.componentOwnerId, }} /> <HorizontalSeparatorLine /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.DMSideSelector`} props={{ componentOwnerId: props.componentOwnerId, onToggleDMs: props.onToggleDMs, directMessagesOpen: props.directMessagesOpen, users, onDMSelected: props.onDMSelected, selectedDM: props.selectedDM, }} /> </> ); }; return ( <> {props.mobileOpen && ( <SideMenuMobile> <SideMenuContent /> </SideMenuMobile> )} <SideMenu> <SideMenuContent /> </SideMenu> </> );