Feat/sidebar&top bar (#1454)

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -54,10 +54,10 @@ export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
               fontSize: Math.ceil(0.5 * size) + 'px',
               background: stringToColour(name || 'AFFiNE'),
               borderRadius: '50%',
-              textAlign: 'center',
-              lineHeight: size + 'px',
-              display: 'inline-block',
-              verticalAlign: 'middle',
+              display: 'inline-flex',
+              lineHeight: '1',
+              justifyContent: 'center',
+              alignItems: 'center',
             }}
           >
             {(name || 'AFFiNE').substring(0, 1)}

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -2,12 +2,13 @@ import { MuiAvatar, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
 export const SelectorWrapper = styled('div')(({ theme }) => {
   return {
-    height: '52px',
+    height: '64px',
     display: 'flex',
     alignItems: 'center',
-    padding: '0 12px',
+    padding: '0 44px 0 12px',
     borderRadius: '5px',
     color: theme.colors.textColor,
+    position: 'relative',
     ':hover': {
       cursor: 'pointer',
       background: theme.colors.hoverBackground,
@@ -25,7 +26,6 @@ export const WorkspaceName = styled('span')(({ theme }) => {
     marginLeft: '12px',
     fontSize: theme.font.h6,
     fontWeight: 500,
-    marginTop: '4px',
     flexGrow: 1,
     ...textEllipsis(1),
   };

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -1,5 +1,4 @@
 import { MuiCollapse } from '@affine/component';
-import { Tooltip } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
@@ -16,14 +15,15 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useCallback, useMemo, useState } from 'react';
 
+import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import { RemWorkspace } from '../../../shared';
-import { Arrow } from './icons';
+import { SidebarSwitch } from '../../affine/sidebar-switch';
 import {
-  StyledArrowButton,
   StyledLink,
   StyledListItem,
   StyledNewPageButton,
+  StyledSidebarWrapper,
   StyledSliderBar,
   StyledSliderBarWrapper,
   StyledSubListItem,
@@ -83,8 +83,6 @@ export type WorkSpaceSliderBarProps = {
   currentPageId: string | null;
   openPage: (pageId: string) => void;
   createPage: () => Promise<string>;
-  show: boolean;
-  setShow: (show: boolean) => void;
   currentPath: string;
   paths: {
     all: (workspaceId: string) => string;
@@ -100,17 +98,17 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
   currentPageId,
   openPage,
   createPage,
-  show,
-  setShow,
   currentPath,
   paths,
   onOpenQuickSearchModal,
   onOpenWorkspaceListModal,
 }) => {
   const currentWorkspaceId = currentWorkspace?.id || null;
-  const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const [showTip, setShowTip] = useState(false);
+  const [showSubFavorite, setOpenSubFavorite] = useState(true);
   const { t } = useTranslation();
+  const [open] = useSidebarStatus();
+
+  const [sidebarOpen] = useSidebarStatus();
   const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
   const onClickNewPage = useCallback(async () => {
     const pageId = await createPage();
@@ -120,33 +118,14 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
   }, [createPage, openPage]);
   return (
     <>
-      <StyledSliderBar show={isPublicWorkspace ? false : show}>
-        <Tooltip
-          content={show ? t('Collapse sidebar') : t('Expand sidebar')}
-          placement="right"
-          visible={showTip}
-        >
-          <StyledArrowButton
-            data-testid="sliderBar-arrowButton"
-            isShow={show}
-            style={{
-              visibility: isPublicWorkspace ? 'hidden' : 'visible',
-            }}
-            onClick={useCallback(() => {
-              setShow(!show);
-              setShowTip(false);
-            }, [setShow, show])}
-            onMouseEnter={useCallback(() => {
-              setShowTip(true);
-            }, [])}
-            onMouseLeave={useCallback(() => {
-              setShowTip(false);
-            }, [])}
-          >
-            <Arrow />
-          </StyledArrowButton>
-        </Tooltip>
-
+      <StyledSliderBar show={isPublicWorkspace ? false : sidebarOpen}>
+        <StyledSidebarWrapper>
+          <SidebarSwitch
+            visible={open}
+            tooltipContent={t('Collapse sidebar')}
+            testid="sliderBar-arrowButton-collapse"
+          />
+        </StyledSidebarWrapper>
         <StyledSliderBarWrapper data-testid="sliderBar">
           <WorkspaceSelector
             currentWorkspace={currentWorkspace}
@@ -196,7 +175,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
             <IconButton
               darker={true}
               onClick={useCallback(() => {
-                setShowSubFavorite(!showSubFavorite);
+                setOpenSubFavorite(!showSubFavorite);
               }, [showSubFavorite])}
             >
               <ArrowDownSmallIcon
@@ -233,7 +212,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
           {/* <WorkspaceSetting
             isShow={showWorkspaceSetting}
             onClose={() => {
-              setShowWorkspaceSetting(false);
+              setOpenWorkspaceSetting(false);
             }}
           /> */}
           {/* TODO: will finish the feature next version */}

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -12,11 +12,19 @@ export const StyledSliderBar = styled('div')<{ show: boolean }>(
       transition: 'width .15s, padding .15s',
       position: 'relative',
       zIndex: theme.zIndex.modal,
-      padding: show ? '24px 12px' : '24px 0',
+      padding: show ? '0 12px' : '0',
       flexShrink: 0,
     };
   }
 );
+export const StyledSidebarWrapper = styled('div')(() => {
+  return {
+    position: 'absolute',
+    right: '12px',
+    top: '16px',
+    zIndex: 1,
+  };
+});
 export const StyledSliderBarWrapper = styled('div')(() => {
   return {
     height: '100%',
@@ -26,31 +34,6 @@ export const StyledSliderBarWrapper = styled('div')(() => {
   };
 });
 
-export const StyledArrowButton = styled('button')<{ isShow: boolean }>(
-  ({ theme, isShow }) => {
-    return {
-      width: '32px',
-      height: '32px',
-      ...displayFlex('center', 'center'),
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
-      borderRadius: '50%',
-      transition: 'all .15s',
-      position: 'absolute',
-      top: '34px',
-      right: '-20px',
-      zIndex: theme.zIndex.modal,
-      svg: {
-        transform: isShow ? 'rotate(180deg)' : 'unset',
-      },
-      ':hover': {
-        color: '#fff',
-        backgroundColor: theme.colors.primaryColor,
-      },
-    };
-  }
-);
-
 export const StyledListItem = styled('div')<{
   active?: boolean;
   disabled?: boolean;