This value is not from our design system because

1. For now the designs are in progress, so I left colours from native, as they match what is now on web.
2. This value was set in figma as shades of white 60 and multiply, so I just calculated the right colour.

This will be likely changed anyway when the designs for web are done.

These are styles that will be used by item labels of different levels. They will be passed in labelStyle of itemData for each item.

I don't think we need to specify the type.

We can simplify this

Can labelStyle be null? If not can it be simplified to classnames(css.title, css[labelStyle])?

Maybe we could move it to the seperate file like CommunityDrawerItemCommunity

We cannot. Detailed explanation is in D5721 summary and comments.

Move those to seperate file so we follow convention: css file per react.js file that it styles.

Personally I found find it easier to read and understand if we explicitly compare with 0 instead of casting to boolean

That name may be a bit misleading as we would expect onClick function to be a callback to an event, but here it's called inside of actual callback. I can see you were inspired by naming in our codebase, but I think going with something like navigateToThread would make code more readable

Why did we use <a> instead of <button> or <Button> component?

I am no expert on React, but it feels like this component is unnecessary. Only thing it does is introducing state, and state toggling function and passing it to CommunityDrawerItem which later on creates more CommunityDrawerItemChat components.

Wouldn't better solution be getting rid of CommunityDrawerItemChat entirely? We would move expandeed state to CommunityDrawerItem, which is the only thing that uses and changes that anyway. It creates confusion when it comes to naming, and I think we can create CommunityDrawerItem components recursively inside CommunityDrawerItem.
What do you think? What would be cons of such solution?

Shouldn't we use MemoizedCommunityDrawerItem here instead?

I don't think we follow that convention

And personally since all these styles relate to drawer items, and there aren't many of the ones used in a different file, this just seems cleaner.

This will anyways be overridden by D6292, so if you don't mind I'll leave it to avoid unnecessary conflicts. Since it's just a name change

We talked about this with @michal (author of <Button>) and @przemek, and we all agreed that this code is correct

We talked about this offline, and agreed that this code makes sense.
For detailed explanation see D5721

Actually I don't think it matters, since whenever CommunityDrawerItemChat re-renders, that means it's props have changed (since we only use it's memoized version), so props for CommunityDrawerItem/MemoizedCommunityDrawerItem it renders also change. But it won't hurt

I checked and in other places on web we use useSelector from ../redux/redux-utils. If I should use useSelector from utils/redux-utils anyway, please let me know