padding fix for header logo container #1216 (#1252)

* padding fix for header container

* collapse menu hover and fade transition added

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

Co-authored-by: Emilien Chauvet <emilien.chauvet.enpc@gmail.com>

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

Co-authored-by: Emilien Chauvet <emilien.chauvet.enpc@gmail.com>

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

Co-authored-by: Emilien Chauvet <emilien.chauvet.enpc@gmail.com>

* Update isVisible

* Update requested proposals for naming

---------

Co-authored-by: Emilien Chauvet <emilien.chauvet.enpc@gmail.com>

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

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

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import NavItemsContainer from './NavItemsContainer';
@@ -18,10 +19,20 @@ const StyledContainer = styled.div`
 `;
 
 export default function MainNavbar({ children }: OwnProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleHover = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   return (
     <StyledContainer>
-      <div>
+      <div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
-        <NavWorkspaceButton />
+        <NavWorkspaceButton hideCollapseButton={isHovered} />
         <NavItemsContainer>{children}</NavItemsContainer>
       </div>
       <SupportChat />

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

@@ -10,8 +10,11 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { navbarIconSize } from '../constants';
 
-const StyledCollapseButton = styled.button`
+const StyledCollapseButton = styled.button<{
+  hide: boolean;
+}>`
   align-items: center;
+  animation: ${({ hide }) => (hide ? 'fadeIn 150ms' : 'none')};
   background: inherit;
   border: 0;
   &:hover {
@@ -29,15 +32,27 @@ const StyledCollapseButton = styled.button`
   padding: 0;
 
   user-select: none;
+  visibility: ${({ hide }) => (hide ? 'visible' : 'hidden')};
   width: 32px;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 `;
 
 type CollapseButtonProps = {
   direction?: 'left' | 'right';
+  hide: boolean;
 };
 
 export default function NavCollapseButton({
   direction = 'left',
+  hide,
 }: CollapseButtonProps) {
   const [isNavOpen, setIsNavOpen] = useRecoilState(isNavbarOpenedState);
 
@@ -48,11 +63,17 @@ export default function NavCollapseButton({
   return (
     <>
       {direction === 'left' ? (
-        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton
+          hide={hide}
+          onClick={() => setIsNavOpen(!isNavOpen)}
+        >
           <IconLayoutSidebarLeftCollapse size={iconSize} />
         </StyledCollapseButton>
       ) : (
-        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton
+          hide={hide}
+          onClick={() => setIsNavOpen(!isNavOpen)}
+        >
           <IconLayoutSidebarRightCollapse size={iconSize} />
         </StyledCollapseButton>
       )}

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

@@ -14,10 +14,8 @@ const StyledContainer = styled.div`
   display: flex;
   height: 34px;
   justify-content: space-between;
-  margin-left: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
   user-select: none;
 `;
 
@@ -47,7 +45,11 @@ const StyledName = styled.div`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-function NavWorkspaceButton() {
+type OwnProps = {
+  hideCollapseButton: boolean;
+};
+
+function NavWorkspaceButton({ hideCollapseButton }: OwnProps) {
   const currentUser = useRecoilValue(currentUserState);
 
   const currentWorkspace = currentUser?.workspaceMember?.workspace;
@@ -66,7 +68,7 @@ function NavWorkspaceButton() {
         ></StyledLogo>
         <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
       </StyledLogoAndNameContainer>
-      <NavCollapseButton direction="left" />
+      <NavCollapseButton direction="left" hide={hideCollapseButton} />
     </StyledContainer>
   );
 }