fix: mobile drawer (#170)

Author: appflowy

src/components/_shared/mobile-drawer/MobileDrawer.tsx

@@ -77,6 +77,7 @@ export function MobileDrawer ({
   swipeAreaHeight,
   maxHeight,
   showPuller = true,
+  topOffset = 0,
 }: {
   children: React.ReactNode;
   triggerNode: ReactElement;
@@ -88,6 +89,7 @@ export function MobileDrawer ({
   swipeAreaHeight?: number | undefined;
   maxHeight?: number | undefined;
   showPuller?: boolean;
+  topOffset?: number;
 }) {
 
   const toggleDrawer = useCallback((open: boolean) => {
@@ -118,6 +120,22 @@ export function MobileDrawer ({
     </>
   );
 
+  const paperStyle: React.CSSProperties = {
+    width: swipeAreaWidth,
+    height: swipeAreaHeight,
+    maxHeight: maxHeight,
+  };
+
+  if (topOffset && (anchor === 'left' || anchor === 'right')) {
+    paperStyle.top = topOffset;
+
+    if (!swipeAreaHeight) {
+      paperStyle.height = `calc(100% - ${topOffset}px)`;
+    } else if (typeof swipeAreaHeight === 'number') {
+      paperStyle.height = Math.max(0, swipeAreaHeight - topOffset);
+    }
+  }
+
   return (
     <>
       {React.cloneElement(triggerNode, { ...triggerNode.props, onClick: toggleDrawer(true) })}
@@ -132,11 +150,7 @@ export function MobileDrawer ({
           },
         }}
         PaperProps={{
-          style: {
-            width: swipeAreaWidth,
-            height: swipeAreaHeight,
-            maxHeight: maxHeight,
-          },
+          style: paperStyle,
         }}
       >
         {drawerContent}
@@ -145,4 +159,4 @@ export function MobileDrawer ({
   );
 }
 
-export default MobileDrawer;
+export default MobileDrawer;

src/components/_shared/mobile-topbar/MobileFolder.tsx

@@ -29,8 +29,8 @@ function MobileFolder({ onClose }: { onClose: () => void }) {
   return (
     <AFScroller overflowXHidden className={'flex w-full flex-1 flex-col gap-2'}>
       <div className={'sticky top-0 z-[10] w-full bg-background-primary p-2 pb-0'}>
-        <div className={'mb-2 flex items-center justify-between'}>
-          <div className={'flex-1 p-2'}>
+        <div className={'mb-2 flex items-start justify-between gap-2'}>
+          <div className={'flex-1'}>
             <MobileWorkspaces onClose={onClose} />
           </div>
           <MobileMore onClose={onClose} />

src/components/_shared/mobile-topbar/MobileTopBar.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@mui/material';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { HEADER_HEIGHT } from '@/application/constants';
 import { UIVariant } from '@/application/types';
@@ -14,13 +14,23 @@ import MobileFolder from '@/components/_shared/mobile-topbar/MobileFolder';
 import PublishMobileFolder from '@/components/_shared/mobile-topbar/PublishMobileFolder';
 import MoreActionsContent from '@/components/_shared/more-actions/MoreActionsContent';
 import { openOrDownload } from '@/utils/open_schema';
+import { getPlatform } from '@/utils/platform';
 
 const PublishBreadcrumb = withPublishBreadcrumb(Breadcrumb);
 const AppBreadcrumb = withAppBreadcrumb(Breadcrumb);
 
 function MobileTopBar({ variant }: { variant?: UIVariant }) {
   const [openFolder, setOpenFolder] = React.useState(false);
   const [openMore, setOpenMore] = React.useState(false);
+  const isMobile = getPlatform().isMobile;
+  const folderDrawerWidth = useMemo(() => {
+    if (typeof window === 'undefined') return undefined;
+    const availableWidth = Math.max(0, window.innerWidth - 56);
+
+    if (isMobile) return availableWidth;
+
+    return Math.min(420, availableWidth);
+  }, [isMobile]);
 
   const handleOpenFolder = useCallback(() => {
     setOpenFolder(true);
@@ -50,12 +60,13 @@ function MobileTopBar({ variant }: { variant?: UIVariant }) {
       }
     >
       <MobileDrawer
-        swipeAreaWidth={window.innerWidth - 56}
+        swipeAreaWidth={folderDrawerWidth}
         onOpen={handleOpenFolder}
         onClose={handleCloseFolder}
         open={openFolder}
         anchor={'left'}
         showPuller={false}
+        topOffset={HEADER_HEIGHT}
         triggerNode={
           <IconButton>
             <MenuIcon />

src/components/app/workspaces/CurrentWorkspace.tsx

@@ -8,11 +8,12 @@ function CurrentWorkspace({
   selectedWorkspace,
   onChangeWorkspace,
   changeLoading,
+  avatarSize = 'xs',
 }: {
   userWorkspaceInfo?: UserWorkspaceInfo;
   selectedWorkspace?: Workspace;
   onChangeWorkspace: (selectedId: string) => void;
-  avatarSize?: number;
+  avatarSize?: 'xs' | 'sm' | 'md' | 'xl';
   changeLoading?: boolean;
 }) {
   if (!userWorkspaceInfo || !selectedWorkspace) {
@@ -33,19 +34,21 @@ function CurrentWorkspace({
   }
 
   return (
-    <>
-      <Avatar shape={'square'} size={'xs'}>
-        <AvatarImage src={selectedWorkspace.icon} alt={''} />
-        <AvatarFallback name={selectedWorkspace.name}>
-          {selectedWorkspace.icon ? <span className='text-lg'>{selectedWorkspace.icon}</span> : selectedWorkspace.name}
-        </AvatarFallback>
-      </Avatar>
+    <div className={'flex w-full min-h-[48px] items-center gap-2'}>
+      {(
+        <Avatar shape={'square'} size={avatarSize}>
+          <AvatarImage src={selectedWorkspace.icon} alt={''} />
+          <AvatarFallback name={selectedWorkspace.name}>
+            {selectedWorkspace.icon ? <span className='text-lg'>{selectedWorkspace.icon}</span> : selectedWorkspace.name}
+          </AvatarFallback>
+        </Avatar>
+      )}
 
       <div data-testid='current-workspace-name' className={'flex-1 truncate font-medium text-text-primary'}>
         {selectedWorkspace.name}
       </div>
       {changeLoading && <Progress variant={'primary'} />}
-    </>
+    </div>
   );
 }
 

src/components/app/workspaces/MobileWorkspaces.tsx

@@ -104,6 +104,7 @@ function MobileWorkspaces({ onClose }: { onClose: () => void }) {
               onChange={handleChange}
               changeLoading={changeLoading || undefined}
               showActions={false}
+              useDropdownItem={false}
             />
           )}
         </div>

src/components/app/workspaces/WorkspaceItem.tsx

@@ -1,11 +1,11 @@
 import { CircularProgress } from '@mui/material';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Role, Workspace } from '@/application/types';
 import MoreActions from '@/components/app/workspaces/MoreActions';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { DropdownMenuItem, DropdownMenuItemTick } from '@/components/ui/dropdown-menu';
+import { DropdownMenuItem, DropdownMenuItemTick, dropdownMenuItemVariants } from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 export function WorkspaceItem({
@@ -17,6 +17,7 @@ export function WorkspaceItem({
   onUpdate,
   onDelete,
   onLeave,
+  useDropdownItem = true,
 }: {
   showActions?: boolean;
   workspace: Workspace;
@@ -26,6 +27,7 @@ export function WorkspaceItem({
   onUpdate?: (workspace: Workspace) => void;
   onDelete?: (workspace: Workspace) => void;
   onLeave?: (workspace: Workspace) => void;
+  useDropdownItem?: boolean;
 }) {
   const { t } = useTranslation();
   const [hovered, setHovered] = useState(false);
@@ -69,18 +71,13 @@ export function WorkspaceItem({
     );
   }, [changeLoading, currentWorkspaceId, hovered, onDelete, onLeave, onUpdate, showActions, workspace]);
 
-  return (
-    <DropdownMenuItem
-      key={workspace.id}
-      data-testid='workspace-item'
-      className={'relative'}
-      onSelect={async () => {
-        if (workspace.id === currentWorkspaceId) return;
-        void onChange(workspace.id);
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+  const handleSelect = useCallback(() => {
+    if (workspace.id === currentWorkspaceId) return;
+    void onChange(workspace.id);
+  }, [currentWorkspaceId, onChange, workspace.id]);
+
+  const content = (
+    <>
       <Avatar shape={'square'} size={'xs'}>
         <AvatarFallback name={workspace.name}>
           {workspace.icon ? <span className='text-lg'>{workspace.icon}</span> : workspace.name}
@@ -112,6 +109,35 @@ export function WorkspaceItem({
         )}
       </div>
       {renderActions}
-    </DropdownMenuItem>
+    </>
+  );
+
+  if (useDropdownItem) {
+    return (
+      <DropdownMenuItem
+        key={workspace.id}
+        data-testid='workspace-item'
+        className={'relative'}
+        onSelect={handleSelect}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {content}
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <button
+      type='button'
+      key={workspace.id}
+      data-testid='workspace-item'
+      className={dropdownMenuItemVariants({ variant: 'default', className: 'relative w-full text-left' })}
+      onClick={handleSelect}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {content}
+    </button>
   );
 }

src/components/app/workspaces/WorkspaceList.tsx

@@ -13,6 +13,7 @@ function WorkspaceList({
   onUpdate,
   onDelete,
   onLeave,
+  useDropdownItem = true,
 }: {
   currentWorkspaceId?: string;
   changeLoading?: string;
@@ -23,6 +24,7 @@ function WorkspaceList({
   onUpdate?: (workspace: Workspace) => void;
   onDelete?: (workspace: Workspace) => void;
   onLeave?: (workspace: Workspace) => void;
+  useDropdownItem?: boolean;
 }) {
   const service = useService();
   const [workspaces, setWorkspaces] = useState<Workspace[]>(defaultWorkspaces || []);
@@ -55,6 +57,7 @@ function WorkspaceList({
             onDelete={onDelete}
             onLeave={onLeave}
             showActions={showActions}
+            useDropdownItem={useDropdownItem}
           />
         );
       })}

src/components/app/workspaces/Workspaces.tsx

@@ -146,7 +146,7 @@ export function Workspaces() {
                 userWorkspaceInfo={userWorkspaceInfo}
                 selectedWorkspace={currentWorkspace}
                 onChangeWorkspace={handleChange}
-                avatarSize={24}
+                avatarSize='sm'
                 changeLoading={changeLoading ? true : false}
               />