refactor(FE-316): Add expanded drawer content and dynamic width

src/components/pages/uniformity/UniformityPageWrapper.tsx

@@ -15,6 +15,8 @@ export default function UniformityPageWrapper({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
+  const expandedDrawerContent = useUiStore((s) => s.expandedDrawerContent);
 
   const isAdd = pathname.includes('/add');
   const isEdit = pathname.includes('/detail/edit');
@@ -57,6 +59,8 @@ export default function UniformityPageWrapper({
         variant='right'
         zIndex='99999'
         sidebarContent={isOpen ? <div className=''>{children}</div> : null}
+        expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
+        expandedWidth='w-[500px]'
       />
     </>
   );

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -53,6 +53,9 @@ const UniformityForm = ({
   const setIsValid = useUiStore((s) => s.setIsValid);
   const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const setExpandedDrawerContent = useUiStore(
+    (s) => s.setExpandedDrawerContent
+  );
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
@@ -344,16 +347,25 @@ const UniformityForm = ({
     return () => {
       unsub();
       useUiStore.getState().setExpandedDrawerOpen(false);
+      useUiStore.getState().setExpandedDrawerContent(null);
     };
   }, [subscribeValidate, setIsValid]);
 
+  useEffect(() => {
+    if (expandedDrawerOpen) {
+      setExpandedDrawerContent(<ExpandedDrawerForm />);
+    } else {
+      setExpandedDrawerContent(null);
+    }
+  }, [expandedDrawerOpen, setExpandedDrawerContent]);
+
   // ===== EVENT HANDLERS =====
   const handleOpenExpandedDrawer = () => {
     setExpandedDrawerOpen(true);
   };
 
   return (
-    <div className='flex h-screen'>
+    <>
       <section className='w-full'>
         <DrawerHeader
           leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
@@ -589,9 +601,7 @@ const UniformityForm = ({
           )}
         </section>
       </section>
-
-      {expandedDrawerOpen && <ExpandedDrawerForm />}
-    </div>
+    </>
   );
 };