perf(AppContainer): dynamic width

src/app/content/views/AppContainer/index.tsx

@@ -1,14 +1,18 @@
 import { type ReactNode, type FC } from 'react'
 import useResizable from '@/hooks/useResizable'
+import useBreakpoint from '@/hooks/useBreakpoint'
 export interface AppContainerProps {
   children?: ReactNode
 }
 
 const AppContainer: FC<AppContainerProps> = ({ children }) => {
+  const { breakpoint } = useBreakpoint()
+  console.log(breakpoint)
+
   const { size, ref } = useResizable({
-    initSize: 375,
-    maxSize: 750,
-    minSize: 375,
+    initSize: Math.max(375, window.innerWidth / 5),
+    maxSize: Math.max(750, window.innerWidth / 3),
+    minSize: Math.max(375, window.innerWidth / 5),
     direction: 'left'
   })
 

src/hooks/useBreakpoint.ts

@@ -11,7 +11,8 @@ const useBreakpoint = () => {
     isMD: breakpoint === 'md',
     isLG: breakpoint === 'lg',
     isXL: breakpoint === 'xl',
-    is2XL: breakpoint === '2xl'
+    is2XL: breakpoint === '2xl',
+    breakpoint
   }
 }