JNG-5219 refactor layout (#241)

judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx.hbs → judo-ui-react/src/main/resources/actor/src/components/SimpleBar.tsx.hbs

@@ -1,46 +1,47 @@
 {{> fragment.header.hbs }}
 
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import type { Theme } from '@mui/material';
+import type { MUIStyledCommonProps } from '@mui/system';
 import { default as SimpleBarOriginal } from 'simplebar-react';
 import type { Props as SimpleBarProps } from 'simplebar-react';
 import { BrowserView, MobileView } from 'react-device-detect';
-import type { MUIStyledCommonProps } from '@mui/system';
-import type { ReactNode } from 'react';
 
 import 'simplebar-react/dist/simplebar.min.css';
 
 const RootStyle = styled(BrowserView)({
   flexGrow: 1,
   height: '100%',
-  overflow: 'hidden'
+  overflow: 'hidden',
 });
 
 export const SimpleBarStyle = styled(SimpleBarOriginal)(({ theme }) => ({
   maxHeight: '100%',
   '& .simplebar-scrollbar': {
     '&:before': {
-      backgroundColor: alpha(theme.palette.grey[500], 0.48)
+      backgroundColor: alpha(theme.palette.grey[500], 0.48),
     },
     '&.simplebar-visible:before': {
-      opacity: 1
-    }
+      opacity: 1,
+    },
   },
   '& .simplebar-track.simplebar-vertical': {
-    width: 10
+    width: 10,
   },
   '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
-    height: 6
+    height: 6,
   },
   '& .simplebar-mask': {
-    zIndex: 'inherit'
-  }
+    zIndex: 'inherit',
+  },
 }));
 
-export function SimpleBar({ children, sx, ...other }: MUIStyledCommonProps<Theme> & SimpleBarProps) {
+export const SimpleBar = forwardRef<HTMLDivElement, MUIStyledCommonProps<Theme> & SimpleBarProps>(({ children, sx, ...other }: MUIStyledCommonProps<Theme> & SimpleBarProps, ref) => {
   return (
-    <>
+    <div ref={ref}>
       <RootStyle>
         <SimpleBarStyle clickOnTrack={false} sx={sx} {...other}>
           {children as ReactNode}
@@ -51,6 +52,7 @@ export function SimpleBar({ children, sx, ...other }: MUIStyledCommonProps<Theme
           {children as ReactNode}
         </Box>
       </MobileView>
-    </>
+    </div>
   );
-}
+});
+

judo-ui-react/src/main/resources/actor/src/components/index.tsx.hbs

@@ -7,3 +7,4 @@ export * from './DropdownButton';
 export * from './MdiIcon';
 export * from './ModeledTabs';
 export * from './PageHeader';
+export * from './SimpleBar';

judo-ui-react/src/main/resources/actor/src/config/layout.ts.hbs

@@ -1,7 +1,6 @@
 {{> fragment.header.hbs }}
 
 export const DIVIDER_HEIGHT = 70;
-export const HORIZONTAL_MAX_ITEM = 6;
 export const DRAWER_WIDTH = 260;
 
 export type I18n = 'en' | 'hu'; // not used yet, will be implemented later, once we need language switching.