diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
index d995e1bfb..d7b249ff5 100644
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -1,103 +1,98 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
+import { getCommunityDrawerItemCommunityHandler } from './community-drawer-item-community-handlers.react.js';
 import css from './community-drawer-item.css';
 import type { DrawerItemProps } from './community-drawer-item.react.js';
 import {
   getChildren,
   getExpandButton,
 } from './community-drawer-utils.react.js';
 import ThreadAvatar from '../components/thread-avatar.react.js';
 
 function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
-    expanded,
-    toggleExpanded,
     paddingLeft,
     expandable = true,
-    handler: Handler,
+    handlerType,
   } = props;
 
+  const Handler = getCommunityDrawerItemCommunityHandler(handlerType);
+
+  const [handler, setHandler] = React.useState({
+    onClick: () => {},
+    isActive: false,
+    expanded: false,
+    toggleExpanded: () => {},
+  });
+
   const children = React.useMemo(
     () =>
       getChildren({
-        expanded,
+        expanded: handler.expanded,
         hasSubchannelsButton,
         itemChildren,
         paddingLeft,
         threadInfo,
         expandable,
-        handler: Handler,
+        handlerType,
       }),
     [
-      expanded,
+      handler.expanded,
       hasSubchannelsButton,
       itemChildren,
       paddingLeft,
       threadInfo,
       expandable,
-      Handler,
+      handlerType,
     ],
   );
 
   const itemExpandButton = React.useMemo(
     () =>
       getExpandButton({
         expandable,
         childrenLength: itemChildren?.length,
         hasSubchannelsButton,
-        expanded,
+        onExpandToggled: null,
+        expanded: handler.expanded,
       }),
-    [expandable, itemChildren?.length, hasSubchannelsButton, expanded],
-  );
-
-  const [handler, setHandler] = React.useState({
-    // eslint-disable-next-line no-unused-vars
-    onClick: event => {},
-    isActive: false,
-  });
-
-  const onClick = React.useCallback(
-    (event: SyntheticEvent<HTMLElement>) => {
-      toggleExpanded?.(threadInfo.id);
-      handler.onClick(event);
-    },
-    [threadInfo.id, toggleExpanded, handler],
+    [expandable, itemChildren?.length, hasSubchannelsButton, handler.expanded],
   );
 
   const classes = classnames({
     [css.communityBase]: true,
-    [css.communityExpanded]: props.expanded,
+    [css.communityExpanded]: handler.expanded,
   });
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   const titleLabel = classnames({
     [css[labelStyle]]: true,
     [css.activeTitle]: handler.isActive,
   });
 
   const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
 
   return (
     <div className={classes}>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
-      <a onClick={onClick} className={css.threadEntry} style={style}>
+      <a onClick={handler.onClick} className={css.threadEntry} style={style}>
         {itemExpandButton}
         <div className={css.titleWrapper}>
           <ThreadAvatar size="micro" threadInfo={threadInfo} />
           <div className={titleLabel}>{uiName}</div>
         </div>
       </a>
       <div className={css.threadListContainer}>{children}</div>
     </div>
   );
 }
 
 const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> =
   React.memo(CommunityDrawerItemCommunity);
 export default MemoizedCommunityDrawerItemCommunity;
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
index 4e3b7f5f9..61596feaa 100644
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -1,155 +1,130 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import type { HandlerProps } from './community-drawer-item-handlers.react.js';
+import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
 import css from './community-drawer-item.css';
 import {
   getChildren,
   getExpandButton,
 } from './community-drawer-utils.react.js';
 import ThreadAvatar from '../components/thread-avatar.react.js';
+import type { NavigationTab } from '../types/nav-types.js';
 import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 export type DrawerItemProps = {
   +itemData: CommunityDrawerItemData<string>,
-  +toggleExpanded?: (threadID: string) => void,
-  +expanded: boolean,
   +paddingLeft: number,
   +expandable?: boolean,
-  +handler: React.ComponentType<HandlerProps>,
+  +handlerType: NavigationTab,
 };
 
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
-    expanded,
-    toggleExpanded,
     paddingLeft,
     expandable = true,
-    handler: Handler,
+    handlerType,
   } = props;
 
+  const [handler, setHandler] = React.useState({
+    onClick: () => {},
+    expanded: false,
+    toggleExpanded: () => {},
+  });
+
+  const Handler = getCommunityDrawerItemHandler(handlerType);
+
   const children = React.useMemo(
     () =>
       getChildren({
-        expanded,
+        expanded: handler.expanded,
         hasSubchannelsButton,
         itemChildren,
         paddingLeft,
         threadInfo,
         expandable,
-        handler: Handler,
+        handlerType,
       }),
     [
-      expanded,
+      handler.expanded,
       hasSubchannelsButton,
       itemChildren,
       paddingLeft,
       threadInfo,
       expandable,
-      Handler,
+      handlerType,
     ],
   );
 
-  const onExpandToggled = React.useCallback(
-    () => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
-    [toggleExpanded, threadInfo.id],
-  );
-
   const itemExpandButton = React.useMemo(
     () =>
       getExpandButton({
         expandable,
         childrenLength: itemChildren.length,
         hasSubchannelsButton,
-        onExpandToggled,
-        expanded,
+        onExpandToggled: handler.toggleExpanded,
+        expanded: handler.expanded,
       }),
     [
       expandable,
       itemChildren.length,
       hasSubchannelsButton,
-      onExpandToggled,
-      expanded,
+      handler.toggleExpanded,
+      handler.expanded,
     ],
   );
 
-  const [handler, setHandler] = React.useState({
-    // eslint-disable-next-line no-unused-vars
-    onClick: event => {},
-  });
-
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   const titleLabel = classnames({
     [css[labelStyle]]: true,
     [css.activeTitle]: handler.isActive,
   });
 
   const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
   const threadEntry = classnames({
     [css.threadEntry]: true,
     [css.active]: handler.isActive,
   });
 
   const titleStyle = React.useMemo(
     () => ({
       marginLeft: shouldRenderAvatars ? 8 : 0,
     }),
     [],
   );
 
   return (
     <>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
       <div className={threadEntry} style={style}>
         {itemExpandButton}
         <a onClick={handler.onClick} className={css.titleWrapper}>
           <ThreadAvatar size="micro" threadInfo={threadInfo} />
           <div className={titleLabel} style={titleStyle}>
             {uiName}
           </div>
         </a>
       </div>
       <div className={css.threadListContainer}>{children}</div>
     </>
   );
 }
 
 export type CommunityDrawerItemChatProps = {
   +itemData: CommunityDrawerItemData<string>,
   +paddingLeft: number,
   +expandable?: boolean,
   +handler: React.ComponentType<HandlerProps>,
 };
 
-function CommunityDrawerItemChat(
-  props: CommunityDrawerItemChatProps,
-): React.Node {
-  const [expanded, setExpanded] = React.useState(false);
-
-  const toggleExpanded = React.useCallback(() => {
-    setExpanded(isExpanded => !isExpanded);
-  }, []);
-
-  return (
-    <MemoizedCommunityDrawerItem
-      {...props}
-      expanded={expanded}
-      toggleExpanded={toggleExpanded}
-    />
-  );
-}
-
-const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> =
-  React.memo(CommunityDrawerItemChat);
-
 const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
   React.memo(CommunityDrawerItem);
 
-export default MemoizedCommunityDrawerItemChat;
+export default MemoizedCommunityDrawerItem;
diff --git a/web/sidebar/community-drawer-utils.react.js b/web/sidebar/community-drawer-utils.react.js
index 6efcb0a6e..df9cf6cc0 100644
--- a/web/sidebar/community-drawer-utils.react.js
+++ b/web/sidebar/community-drawer-utils.react.js
@@ -1,89 +1,89 @@
 // @flow
 
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types';
 import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
 
-import type { HandlerProps } from './community-drawer-item-handlers.react';
 import css from './community-drawer-item.css';
 import CommunityDrawerItemChat from './community-drawer-item.react.js';
 import { ExpandButton } from './expand-buttons.react.js';
 import SubchannelsButton from './subchannels-button.react.js';
+import type { NavigationTab } from '../types/nav-types.js';
 
 const indentation = 14;
 const subchannelsButtonIndentation = 24;
 
 function getChildren({
   expanded,
   hasSubchannelsButton,
   itemChildren,
   paddingLeft,
   threadInfo,
   expandable,
-  handler,
+  handlerType,
 }: {
   expanded: boolean,
   hasSubchannelsButton: boolean,
   itemChildren: $ReadOnlyArray<CommunityDrawerItemData<string>>,
   paddingLeft: number,
   threadInfo: ThreadInfo,
   expandable: boolean,
-  handler: React.ComponentType<HandlerProps>,
+  handlerType: NavigationTab,
 }): React.Node {
   if (!expanded) {
     return null;
   }
   if (hasSubchannelsButton) {
     const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
     return (
       <div
         className={css.subchannelsButton}
         style={{ paddingLeft: buttonPaddingLeft }}
       >
         <SubchannelsButton threadInfo={threadInfo} />
       </div>
     );
   }
   return itemChildren.map(item => (
     <CommunityDrawerItemChat
       itemData={item}
       key={item.threadInfo.id}
       paddingLeft={paddingLeft + indentation}
       expandable={expandable}
-      handler={handler}
+      handlerType={handlerType}
     />
   ));
 }
 
 function getExpandButton({
   expandable,
   childrenLength,
   hasSubchannelsButton,
   onExpandToggled,
   expanded,
 }: {
   +expandable: boolean,
   +childrenLength: ?number,
   +hasSubchannelsButton: boolean,
   +onExpandToggled?: ?() => ?void,
   +expanded: boolean,
 }): React.Node {
   if (!expandable) {
     return null;
   }
   if (childrenLength === 0 && !hasSubchannelsButton) {
     return (
       <div className={css.buttonContainer}>
         <ExpandButton disabled={true} />
       </div>
     );
   }
   return (
     <div className={css.buttonContainer}>
       <ExpandButton onClick={onExpandToggled} expanded={expanded} />
     </div>
   );
 }
 
 export { getChildren, getExpandButton };
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
index 77c3e063f..81f9cba7e 100644
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -1,96 +1,81 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   childThreadInfos,
   communityThreadSelector,
 } from 'lib/selectors/thread-selectors.js';
 import {
   createRecursiveDrawerItemsData,
   appendSuffix,
 } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
 
 import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js';
-import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
 import css from './community-drawer.css';
 import { ThreadListProvider } from '../chat/thread-list-provider.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const maxDepth = 2;
 const labelStyles = ['title'];
 
-const HandlerChat = getCommunityDrawerItemHandler('chat');
-const HandlerCal = getCommunityDrawerItemHandler('calendar');
-
 function CommunityDrawer(): React.Node {
   const tab = useSelector(state => state.navInfo.tab);
   const childThreadInfosMap = useSelector(childThreadInfos);
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
   const communitiesSuffixed = React.useMemo(
     () => appendSuffix(resolvedCommunities),
     [resolvedCommunities],
   );
 
   const drawerItemsData = createRecursiveDrawerItemsData(
     childThreadInfosMap,
     communitiesSuffixed,
     labelStyles,
     maxDepth,
   );
 
-  const [openCommunity, setOpenCommunity] = React.useState(
-    communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
-  );
-
-  const setOpenCommunityOrClose = React.useCallback((index: string) => {
-    setOpenCommunity(open => (open === index ? null : index));
-  }, []);
-
   const communitiesComponentsDefault = React.useMemo(
     () =>
       drawerItemsData.map(item => (
         <CommunityDrawerItemCommunity
           itemData={item}
           key={`${item.threadInfo.id}_chat`}
-          toggleExpanded={setOpenCommunityOrClose}
-          expanded={item.threadInfo.id === openCommunity}
           paddingLeft={10}
           expandable={true}
-          handler={HandlerChat}
+          handlerType="chat"
         />
       )),
-    [drawerItemsData, openCommunity, setOpenCommunityOrClose],
+    [drawerItemsData],
   );
 
   const communitiesComponentsCal = React.useMemo(
     () =>
       drawerItemsData.map(item => (
         <CommunityDrawerItemCommunity
           itemData={item}
           key={`${item.threadInfo.id}_cal`}
-          expanded={false}
           paddingLeft={10}
           expandable={false}
-          handler={HandlerCal}
+          handlerType="calendar"
         />
       )),
     [drawerItemsData],
   );
 
   const defaultStyle = tab === 'calendar' ? css.hidden : null;
   const calStyle = tab !== 'calendar' ? css.hidden : null;
 
   return (
     <ThreadListProvider>
       <div className={css.container}>
         <div className={defaultStyle}>{communitiesComponentsDefault}</div>
         <div className={calStyle}>{communitiesComponentsCal}</div>
       </div>
     </ThreadListProvider>
   );
 }
 
 export default CommunityDrawer;