Refactor NavCollapse button (#1625)

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -96,7 +96,7 @@ export const PageHeader = ({
       <StyledLeftContainer>
         {!isNavbarOpened && (
           <StyledTopBarButtonContainer>
-            <NavCollapseButton direction="right" hide={true} />
+            <NavCollapseButton direction="right" />
           </StyledTopBarButtonContainer>
         )}
         {hasBackButton && (

front/src/modules/ui/navbar/components/MainNavbar.tsx

@@ -32,7 +32,7 @@ const MainNavbar = ({ children }: OwnProps) => {
   return (
     <StyledContainer>
       <div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
-        <NavWorkspaceButton hideCollapseButton={isHovered} />
+        <NavWorkspaceButton showCollapseButton={isHovered} />
         <NavItemsContainer>{children}</NavItemsContainer>
       </div>
       <SupportChat />

front/src/modules/ui/navbar/components/NavCollapseButton.tsx

@@ -1,4 +1,6 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
@@ -8,11 +10,8 @@ import {
 } from '@/ui/icon';
 import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
 
-const StyledCollapseButton = styled.div<{
+const StyledCollapseButton = styled(motion.div)`
-  hide: boolean;
-}>`
   align-items: center;
-  animation: ${({ hide }) => (hide ? 'fadeIn 150ms' : 'none')};
   background: inherit;
   border: 0;
   &:hover {
@@ -30,58 +29,45 @@ const StyledCollapseButton = styled.div<{
   padding: 0;
 
   user-select: none;
-  visibility: ${({ hide }) => (hide ? 'visible' : 'hidden')};
   width: 24px;
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
 `;
 
 type CollapseButtonProps = {
   direction?: 'left' | 'right';
-  hide: boolean;
+  show?: boolean;
 };
 
 const NavCollapseButton = ({
   direction = 'left',
-  hide,
+  show = true,
 }: CollapseButtonProps) => {
   const [isNavbarOpened, setIsNavbarOpened] =
     useRecoilState(isNavbarOpenedState);
 
   const iconSize = 'small';
+  const theme = useTheme();
 
   return (
     <>
-      {direction === 'left' ? (
+      <StyledCollapseButton
-        <StyledCollapseButton
+        animate={{
-          hide={hide}
+          opacity: show ? 1 : 0,
-          onClick={() => setIsNavbarOpened(!isNavbarOpened)}
+        }}
-        >
+        transition={{
-          <IconButton
+          duration: theme.animation.duration.normal,
-            Icon={IconLayoutSidebarLeftCollapse}
+        }}
-            variant="tertiary"
+        onClick={() => setIsNavbarOpened(!isNavbarOpened)}
-            size={iconSize}
+      >
-          />
+        <IconButton
-        </StyledCollapseButton>
+          Icon={
-      ) : (
+            direction === 'left'
-        <StyledCollapseButton
+              ? IconLayoutSidebarLeftCollapse
-          hide={hide}
+              : IconLayoutSidebarRightCollapse
-          onClick={() => setIsNavbarOpened(!isNavbarOpened)}
+          }
-        >
+          variant="tertiary"
-          <IconButton
+          size={iconSize}
-            Icon={IconLayoutSidebarRightCollapse}
+        />
-            variant="tertiary"
+      </StyledCollapseButton>
-            size={iconSize}
-          />
-        </StyledCollapseButton>
-      )}
     </>
   );
 };

front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx

@@ -46,10 +46,10 @@ const StyledName = styled.div`
 `;
 
 type OwnProps = {
-  hideCollapseButton: boolean;
+  showCollapseButton: boolean;
 };
 
-const NavWorkspaceButton = ({ hideCollapseButton }: OwnProps) => {
+const NavWorkspaceButton = ({ showCollapseButton }: OwnProps) => {
   const currentUser = useRecoilValue(currentUserState);
 
   const currentWorkspace = currentUser?.workspaceMember?.workspace;
@@ -68,7 +68,7 @@ const NavWorkspaceButton = ({ hideCollapseButton }: OwnProps) => {
         ></StyledLogo>
         <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
       </StyledLogoAndNameContainer>
-      <NavCollapseButton direction="left" hide={hideCollapseButton} />
+      <NavCollapseButton direction="left" show={showCollapseButton} />
     </StyledContainer>
   );
 };