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

src/components/Drawer.tsx

@@ -50,12 +50,21 @@ const Drawer = ({
       drawerSidebarContent: 'min-h-full bg-base-100',
     };
 
+    const getSidebarWidth = () => {
+      if (variant === 'sidebar') {
+        return expandedContent
+          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
+          : 'w-full max-w-[300px] lg:w-[300px]';
+      }
+      return 'w-full sm:min-w-120 sm:w-fit';
+    };
+
     if (variant === 'sidebar') {
       return {
         ...baseClassNames,
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full max-w-[300px] lg:w-[300px]'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'right') {
@@ -68,7 +77,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -80,7 +89,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     }

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

src/stores/ui/slices/drawer.slice.ts

@@ -1,5 +1,6 @@
 import { DrawerUISlice } from '@/types/stores';
 import { StateCreator } from 'zustand';
+import { ReactNode } from 'react';
 
 export const createDrawerUISlice: StateCreator<
   DrawerUISlice,
@@ -44,4 +45,8 @@ export const createDrawerUISlice: StateCreator<
     const current = get().expandedDrawerOpen;
     set({ expandedDrawerOpen: !current });
   },
+
+  expandedDrawerContent: null as ReactNode | null,
+  setExpandedDrawerContent: (content: ReactNode) =>
+    set({ expandedDrawerContent: content }),
 });

src/types/stores.d.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 type MainUiSlice = {
   mainDrawerOpen: boolean;
   setMainDrawerOpen: (open: boolean) => void;
@@ -13,6 +15,8 @@ type DrawerUISlice = {
   expandedDrawerOpen: boolean;
   setExpandedDrawerOpen: (open: boolean) => void;
   toggleExpandedDrawer: () => void;
+  expandedDrawerContent: ReactNode | null;
+  setExpandedDrawerContent: (content: ReactNode) => void;
 };
 
 export type UIStore = MainUiSlice & DrawerUISlice;