refactor(FE-316): Add expandable secondary drawer panel

src/components/Drawer.tsx

@@ -15,6 +15,8 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
+  expandedContent?: ReactNode;
+  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -36,6 +38,8 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
+  expandedContent,
+  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -138,14 +142,37 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content */}
+        {/* Sidebar Content - Full height container */}
         <div
           className={cn(
-            varianClassName?.drawerSidebarContent,
-            className?.drawerContent
+            'flex h-screen bg-base-100 overflow-hidden',
+            variant === 'right' && 'flex-row'
           )}
         >
-          {sidebarContent}
+          {/* Primary Sidebar Content */}
+          <div
+            className={cn(
+              varianClassName?.drawerSidebarContent,
+              className?.drawerContent,
+              'overflow-y-auto'
+            )}
+          >
+            {sidebarContent}
+          </div>
+
+          {/* Expanded Drawer (Right side, side-by-side) */}
+          {expandedContent && (
+            <div
+              className={cn(
+                'border-l border-gray-200 bg-white flex flex-col h-full',
+                expandedWidth
+              )}
+            >
+              <div className='overflow-y-auto flex-1 h-full'>
+                {expandedContent}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>