Adjust style for expanded and compressed class

https://youtrack.weseek.co.jp/issue/GW-7850
- Move onClick event handler of bookmark folder list
- Move compressed and expanded css class to UsersHomePageFooter.module.scss
- Implement expand and compress container in UsersHomePageFooter component

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -155,9 +155,8 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
 
 
   return (
-    <div id={`bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container" onClick={loadChildFolder}
-    >
-      <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center">
+    <div id={`bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
+      <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" onClick={loadChildFolder}>
         <div className="grw-triangle-container d-flex justify-content-center">
           {hasChildren() && (
             <button

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -1,4 +1,7 @@
 @use '~/styles/molecules/page_list';
+@use '~/styles/variables' as var;
+$grw-sidebar-content-header-height: 58px;
+$grw-sidebar-content-footer-height: 50px;
 
 .user-page-footer :global {
   .grw-user-page-list-m {
@@ -59,3 +62,13 @@
     }
   }
 }
+
+.grw-bookarks-contents-compressed {
+  max-height: calc(70vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}
+
+.grw-bookarks-contents-expanded {
+  max-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}

packages/app/src/components/UsersHomePageFooter.tsx

@@ -14,9 +14,9 @@ import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { usePageDeleteModal } from '~/stores/modal';
 
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
+import BookmarkFolderTree from './Bookmarks/BookmarkFolderTree';
 import CompressIcon from './Icons/CompressIcon';
 import ExpandIcon from './Icons/ExpandIcon';
-import BookmarkFolderTree from './Bookmarks/BookmarkFolderTree';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
 import { BookmarkList } from './PageList/BookmarkList';
 
@@ -104,29 +104,30 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
 
           </div>
         )}
-        {
-          <BookmarkFolderTree />
+        <div className={`${isExpanded ? `${styles['grw-bookarks-contents-expanded']}` : `${styles['grw-bookarks-contents-compressed']}`}`}>
+          {
+            <BookmarkFolderTree />
 
-        }
-        <div id="user-bookmark-list" className={`page-list p-3 ${styles['page-list']}`}>
-          <div className="grw-bookmarks-list-container">
-            {currentUserBookmarksData?.length === 0
-              ? t('No bookmarks yet')
-              : <ul className="list-group page-list-ul page-list-ul-flat mb-3">
-                {currentUserBookmarksData?.map(page => (
-                  <BookmarkList
-                    key={page._id}
-                    page={page}
-                    onRenamed={mutateCurrentUserBookmarks}
-                    onUnbookmarked={mutateCurrentUserBookmarks}
-                    onClickDeleteMenuItem={deleteMenuItemClickHandler}
-                  />
-                ))}
-              </ul>
-            }
+          }
+          <div id="user-bookmark-list" className={`page-list p-3 ${styles['page-list']}`}>
+            <div className="grw-bookmarks-list-container">
+              {currentUserBookmarksData?.length === 0
+                ? t('No bookmarks yet')
+                : <ul className="list-group page-list-ul page-list-ul-flat mb-3">
+                  {currentUserBookmarksData?.map(page => (
+                    <BookmarkList
+                      key={page._id}
+                      page={page}
+                      onRenamed={mutateCurrentUserBookmarks}
+                      onUnbookmarked={mutateCurrentUserBookmarks}
+                      onClickDeleteMenuItem={deleteMenuItemClickHandler}
+                    />
+                  ))}
+                </ul>
+              }
+            </div>
           </div>
         </div>
-
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">
         <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">