admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Manikanta cheepurupalli
2023-08-25 16:41:57 +05:30
committed by GitHub
parent 5a5ee1ff8d
commit 69e0917338
4 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
front/src/modules/ui/navbar/components/NavCollapseButton.tsx
View File

@ -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>
)}