return an empty element when the collapsed mode and it is closed

apps/app/src/components/Sidebar/SidebarContents.tsx

@@ -1,7 +1,7 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { SidebarContentsType } from '~/interfaces/ui';
-import { useCurrentSidebarContents } from '~/stores/ui';
+import { useCollapsedContentsOpened, useCollapsedMode, useCurrentSidebarContents } from '~/stores/ui';
 
 
 import { Bookmarks } from './Bookmarks';
@@ -14,25 +14,31 @@ import styles from './SidebarContents.module.scss';
 
 
 export const SidebarContents = memo(() => {
+  const { data: isCollapsedMode } = useCollapsedMode();
+  const { data: isCollapsedContentsOpened } = useCollapsedContentsOpened();
+
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
-  let Contents;
-  switch (currentSidebarContents) {
-    case SidebarContentsType.RECENT:
-      Contents = RecentChanges;
-      break;
-    case SidebarContentsType.CUSTOM:
-      Contents = CustomSidebar;
-      break;
-    case SidebarContentsType.TAG:
-      Contents = Tag;
-      break;
-    case SidebarContentsType.BOOKMARKS:
-      Contents = Bookmarks;
-      break;
-    default:
-      Contents = PageTree;
-  }
+  const Contents = useMemo(() => {
+
+    // return an empty element when the collapsed mode and it is closed
+    if (isCollapsedMode && !isCollapsedContentsOpened) {
+      return () => <></>;
+    }
+
+    switch (currentSidebarContents) {
+      case SidebarContentsType.RECENT:
+        return RecentChanges;
+      case SidebarContentsType.CUSTOM:
+        return CustomSidebar;
+      case SidebarContentsType.TAG:
+        return Tag;
+      case SidebarContentsType.BOOKMARKS:
+        return Bookmarks;
+      default:
+        return PageTree;
+    }
+  }, [currentSidebarContents, isCollapsedContentsOpened, isCollapsedMode]);
 
   return (
     <div className={`grw-sidebar-contents ${styles['grw-sidebar-contents']}`} data-testid="grw-sidebar-contents">