mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-23 14:55:44 +00:00
refactor(FE): Use className props for drawer widths
This commit is contained in:
@@ -16,7 +16,6 @@ interface DrawerProps {
|
|||||||
onBackdropClick?: () => void;
|
onBackdropClick?: () => void;
|
||||||
closeOnBackdropClick?: boolean;
|
closeOnBackdropClick?: boolean;
|
||||||
expandedContent?: ReactNode;
|
expandedContent?: ReactNode;
|
||||||
expandedWidth?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type DrawerClassName = {
|
type DrawerClassName = {
|
||||||
@@ -25,6 +24,7 @@ type DrawerClassName = {
|
|||||||
drawerSide?: string;
|
drawerSide?: string;
|
||||||
drawerOverlay?: string;
|
drawerOverlay?: string;
|
||||||
drawerSidebarContent?: string;
|
drawerSidebarContent?: string;
|
||||||
|
drawerExpandedContent?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Drawer = ({
|
const Drawer = ({
|
||||||
@@ -39,7 +39,6 @@ const Drawer = ({
|
|||||||
onBackdropClick,
|
onBackdropClick,
|
||||||
closeOnBackdropClick = true,
|
closeOnBackdropClick = true,
|
||||||
expandedContent,
|
expandedContent,
|
||||||
expandedWidth = 'w-[400px]',
|
|
||||||
}: DrawerProps) => {
|
}: DrawerProps) => {
|
||||||
const getDrawerClassNames = (): DrawerClassName => {
|
const getDrawerClassNames = (): DrawerClassName => {
|
||||||
const baseClassNames = {
|
const baseClassNames = {
|
||||||
@@ -56,6 +55,9 @@ const Drawer = ({
|
|||||||
? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
|
? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
|
||||||
: 'w-full max-w-[300px] lg:w-[300px]';
|
: 'w-full max-w-[300px] lg:w-[300px]';
|
||||||
}
|
}
|
||||||
|
if (className?.drawerSidebarContent) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
return 'w-full sm:min-w-120 sm:w-fit';
|
return 'w-full sm:min-w-120 sm:w-fit';
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -174,7 +176,7 @@ const Drawer = ({
|
|||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'border-l border-gray-200 bg-white flex flex-col h-full',
|
'border-l border-gray-200 bg-white flex flex-col h-full',
|
||||||
expandedWidth
|
className?.drawerExpandedContent
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className='overflow-y-auto flex-1 h-full'>
|
<div className='overflow-y-auto flex-1 h-full'>
|
||||||
|
|||||||
@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
|
|||||||
zIndex='99999'
|
zIndex='99999'
|
||||||
sidebarContent={isOpen ? <div className=''>{children}</div> : null}
|
sidebarContent={isOpen ? <div className=''>{children}</div> : null}
|
||||||
expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
|
expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
|
||||||
expandedWidth='w-[500px]'
|
className={{
|
||||||
|
drawerSidebarContent: 'w-[446px]',
|
||||||
|
drawerExpandedContent: 'w-[446px]',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user