Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
[UI] Fix sidebar flickering and space shifting when nativating from settings to dashboard (#140)
+56
-56
+1
-1
client/src/components/Sidebar.tsx
+1
-1
client/src/components/Sidebar.tsx
···
270
270
<div
271
271
className={`relative flex flex-col justify-between bg-white ${
272
272
collapsed ? '' : 'min-w-[250px]'
273
-
} text-[14px]`}
273
+
} text-[14px] leading-normal`}
274
274
>
275
275
<div className="flex flex-col p-[14px]">
276
276
<div className="flex items-center justify-between mb-[24px]">
+1
-3
client/src/hooks/useDynamicLegacyCSS.ts
+1
-3
client/src/hooks/useDynamicLegacyCSS.ts
···
1
1
import { useEffect, useState } from 'react';
2
-
import { useLocation } from 'react-router-dom';
3
2
4
3
const useDynamicLegacyCSS = (isUsingLegacyCSS: boolean) => {
5
-
const { pathname } = useLocation();
6
4
const [cssLoaded, setCssLoaded] = useState(false);
7
5
8
6
useEffect(() => {
···
21
19
} else {
22
20
setCssLoaded(true);
23
21
}
24
-
}, [pathname, isUsingLegacyCSS]);
22
+
}, [isUsingLegacyCSS]);
25
23
26
24
return cssLoaded;
27
25
};
+54
-52
client/src/webpages/dashboard/Dashboard.tsx
+54
-52
client/src/webpages/dashboard/Dashboard.tsx
···
67
67
import NCMECSettings from '../settings/NCMECSettings';
68
68
import SSOSettings from '../settings/SSOSettings';
69
69
import MatchingBanksDashboard from './banks/MatchingBanksDashboard';
70
-
import Layout from './Layout';
71
70
import ManualReviewAppealSettings from './mrt/ManualReviewAppealSettings';
72
71
import Overview from './overview/Overview';
73
72
import PolicyForm from './policies/PolicyForm';
···
707
706
return <FullScreenLoading />;
708
707
}
709
708
710
-
if (isUsingLegacyCSS) {
711
-
return (
712
-
<div className="flex w-full h-screen">
713
-
<Helmet>
714
-
<title>Home</title>
715
-
</Helmet>
716
-
<Sidebar
717
-
menuItems={menuItems}
718
-
settingsMenuItems={settingsMenuItems}
719
-
selectedMenuItem={selectedMenuItem}
720
-
setSelectedMenuItem={setSelectedMenuItem}
721
-
permissions={permissions}
722
-
logout={async () => logout()}
723
-
isDemoOrg={isDemoOrg}
724
-
/>
725
-
<div className="w-px h-full bg-[#e5e7eb]" />
726
-
<div className="flex justify-center w-full px-12 py-8 overflow-scroll scrollbar-hide">
727
-
<ErrorBoundary
728
-
key={pathname}
729
-
containedInLayout
730
-
buttonTitle={
731
-
currentRouteHandle?.error?.buttonTitle ?? 'Return to dashboard'
732
-
}
733
-
buttonLinkPath={
734
-
currentRouteHandle?.error?.buttonLinkPath
735
-
? `/dashboard/${currentRouteHandle.error.buttonLinkPath}`
736
-
: '/dashboard'
737
-
}
738
-
>
739
-
<div className="w-full max-w-[1280px]">
740
-
{isCSSLoaded ? <Outlet /> : <FullScreenLoading />}
741
-
</div>
742
-
</ErrorBoundary>
743
-
</div>
744
-
</div>
745
-
);
746
-
}
747
-
748
709
return (
749
-
<Layout
750
-
sidebarSlot={
751
-
<Sidebar
752
-
menuItems={menuItems}
753
-
settingsMenuItems={settingsMenuItems}
754
-
selectedMenuItem={selectedMenuItem}
755
-
setSelectedMenuItem={setSelectedMenuItem}
756
-
permissions={permissions}
757
-
logout={async () => logout()}
758
-
isDemoOrg={isDemoOrg}
759
-
/>
760
-
}
761
-
/>
710
+
<div
711
+
className={`flex w-full h-screen${isUsingLegacyCSS ? '' : ' bg-slate-50'}`}
712
+
>
713
+
<Helmet>
714
+
<title>Home</title>
715
+
</Helmet>
716
+
<Sidebar
717
+
menuItems={menuItems}
718
+
settingsMenuItems={settingsMenuItems}
719
+
selectedMenuItem={selectedMenuItem}
720
+
setSelectedMenuItem={setSelectedMenuItem}
721
+
permissions={permissions}
722
+
logout={async () => logout()}
723
+
isDemoOrg={isDemoOrg}
724
+
/>
725
+
{isUsingLegacyCSS ? (
726
+
<>
727
+
<div className="w-px h-full bg-[#e5e7eb]" />
728
+
<div className="flex justify-center w-full px-12 py-8 overflow-scroll scrollbar-hide">
729
+
<ErrorBoundary
730
+
key={pathname}
731
+
containedInLayout
732
+
buttonTitle={
733
+
currentRouteHandle?.error?.buttonTitle ?? 'Return to dashboard'
734
+
}
735
+
buttonLinkPath={
736
+
currentRouteHandle?.error?.buttonLinkPath
737
+
? `/dashboard/${currentRouteHandle.error.buttonLinkPath}`
738
+
: '/dashboard'
739
+
}
740
+
>
741
+
<div className="w-full max-w-[1280px]">
742
+
{isCSSLoaded ? <Outlet /> : <FullScreenLoading />}
743
+
</div>
744
+
</ErrorBoundary>
745
+
</div>
746
+
</>
747
+
) : (
748
+
<main className="flex flex-col flex-grow overflow-y-auto min-h-0">
749
+
<div className="p-10">
750
+
<ErrorBoundary
751
+
key={pathname}
752
+
containedInLayout
753
+
buttonTitle={currentRouteHandle?.error?.buttonTitle}
754
+
buttonLinkPath={currentRouteHandle?.error?.buttonLinkPath}
755
+
>
756
+
<div className="w-full max-w-[1280px]">
757
+
<Outlet />
758
+
</div>
759
+
</ErrorBoundary>
760
+
</div>
761
+
</main>
762
+
)}
763
+
</div>
762
764
);
763
765
}
764
766