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

feat - Compact sidebar (#7414)

Browse Source
This commit is contained in:
nitin
2024-10-15 17:32:28 +05:30
committed by GitHub
parent c0610419c2
commit a9deede9ba
26 changed files with 524 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
View File

@ -4,7 +4,7 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
@ -47,14 +47,14 @@ const StyledSkeletonTitleContainer = styled.div`
export const LeftPanelSkeletonLoader = () => {
const isMobile = useIsMobile();
const mobileWidth = isMobile ? 0 : '100%';
const desktopWidth = !mobileWidth ? 12 : DESKTOP_NAV_DRAWER_WIDTHS.menu;
return (
<StyledAnimatedContainer
initial={false}
animate={{
width: isMobile ? mobileWidth : desktopWidth,
width: isMobile
? NAV_DRAWER_WIDTHS.menu.mobile.collapsed
: NAV_DRAWER_WIDTHS.menu.desktop.expanded,
opacity: isMobile ? 0 : 1,
}}
transition={{

4
packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
@ -12,7 +12,7 @@ const StyledContainer = styled.div`
flex-direction: row;
gap: 12px;
height: 100dvh;
min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
min-width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
width: 100%;
padding: 12px 8px 12px 8px;
overflow: hidden;