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

fix navigation panel workspace picker padding (#6062)

Browse Source 
## Before
<img width="223" alt="Screenshot 2024-06-27 at 15 23 26"
src="https://github.com/twentyhq/twenty/assets/1834158/18cb5e15-352f-4e65-9cff-6e396abe4318">

## After



<img width="229" alt="Screenshot 2024-06-27 at 15 23 07"
src="https://github.com/twentyhq/twenty/assets/1834158/53502c23-d9b4-4967-9e56-26e62e5e50ea">

<img width="225" alt="Screenshot 2024-06-27 at 15 25 23"
src="https://github.com/twentyhq/twenty/assets/1834158/fbb751ba-2bde-44f0-9c70-a9091e9b9012">
This commit is contained in:
Weiko
2024-06-27 15:43:00 +02:00
committed by GitHub
parent 3c3bd96687
commit 86fa6ec85f
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
View File

@ -9,9 +9,13 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
const StyledContainer = styled.div` const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${({ theme, isMultiWorkspace }) =>
!isMultiWorkspace ? theme.spacing(2) : null};
padding: ${({ theme, isMultiWorkspace }) =>
!isMultiWorkspace ? theme.spacing(1) : null};
height: ${({ theme }) => theme.spacing(7)}; height: ${({ theme }) => theme.spacing(7)};
user-select: none; user-select: none;
`; `;
@ -53,10 +57,11 @@ export const NavigationDrawerHeader = ({
}: NavigationDrawerHeaderProps) => { }: NavigationDrawerHeaderProps) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const workspaces = useRecoilValue(workspacesState); const workspaces = useRecoilValue(workspacesState);
const isMultiWorkspace = workspaces !== null && workspaces.length > 1;
return ( return (
<StyledContainer> <StyledContainer isMultiWorkspace={isMultiWorkspace}>
{workspaces !== null && workspaces.length > 1 ? ( {isMultiWorkspace ? (
<MultiWorkspaceDropdownButton workspaces={workspaces} /> <MultiWorkspaceDropdownButton workspaces={workspaces} />
) : ( ) : (
<> <>