refactor layout

src/shared/Sidebar.tsx

@@ -48,17 +48,17 @@ const SideBar: FC = () => {
       )}
       <div
         className={clx(
-          'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[240px] bg-white flex-col py-12',
-          openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
+          'fixed right-0 top-0 bottom-0 flex w-[var(--layout-sidebar-width)] translate-x-[400px] flex-col overflow-hidden bg-white py-12 opacity-0 invisible transition-all ease-in-out xl:right-[var(--layout-frame)] xl:top-[var(--layout-frame)] xl:bottom-[var(--layout-frame)] xl:z-40 xl:translate-x-0 xl:rounded-[32px] xl:opacity-100 xl:visible',
+          openSidebar && 'visible z-40 flex translate-x-0 opacity-100'
         )}
       >
-        <div className="px-6">
+        <div className="shrink-0 px-6">
           <div className="flex border-b-2 border-[#F5F7FC] pb-10">
             <img src={LogoImage} className="w-[120px]" />
           </div>
         </div>
 
-        <div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
+        <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar px-6">
           <div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>
 
           <div className="mt-3">