Improve platform responsiveness for smaller screens

src/App.tsx

@@ -11,13 +11,14 @@ import { checkAuthStatusService } from 'services/AuthService';
 import { UnauthenticatedRoute } from 'routes/UnauthenticatedRoute/UnauthenticatedRoute';
 import { AuthenticatedRoute } from 'routes/AuthenticatedRoute/AuthenticatedRoute';
 import { Logout } from 'containers/Auth/Logout/Logout';
+import { isGreaterThanLgBreakpoint } from 'common/utils';
 
 const App = () => {
   const navigate = useNavigate();
   // by default, do not assign any value to assume login or logout
   // let's checkAuthStatusService allocate it on useEffect
   const [authenticated, setAuthenticated] = useState<any>();
-  const [drawerOpen, setDrawerOpen] = useState(window.innerWidth > 768);
+  const [drawerOpen, setDrawerOpen] = useState(isGreaterThanLgBreakpoint());
 
   useEffect(() => {
     setAuthenticated(checkAuthStatusService());

src/common/utils.ts

@@ -201,4 +201,7 @@ export const getAddOrRemoveRoleIds = (roles: any, payload: any) => {
   return { ...rest, addRoleIds, deleteRoleIds };
 };
 
+// lg breakpoint is 1200px for MUI
+export const isGreaterThanLgBreakpoint = () => window.innerWidth > 1200;
+
 export default getObject;

src/components/UI/Layout/Layout.tsx

@@ -10,15 +10,12 @@ export interface LayoutProps {
 }
 
 export const Layout = ({ children }: LayoutProps) => {
-  const { drawerOpen, setDrawerOpen } = useContext(SideDrawerContext);
-  let mainStyle = styles.Main;
-  if (!drawerOpen) {
-    mainStyle = styles.MainFullWidth;
-  }
+  const { setDrawerOpen } = useContext(SideDrawerContext);
+
   return (
     <>
       <SideDrawer />
-      <main className={mainStyle} data-testid="layout">
+      <main className={styles.MainFullWidth} data-testid="layout">
         <div className={styles.MobileHeader}>
           <img src={GlificLogo} className={styles.GlificLogo} alt="Glific" />
           <span

src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx

@@ -16,7 +16,9 @@ import GlificLogo from 'assets/images/logo/Logo.svg';
 import { getUserRolePermissions, getUserAccountMenus, getStaffManagementMenus } from 'context/role';
 import { Tooltip } from 'components/UI/Tooltip/Tooltip';
 import { WalletBalance } from 'containers/WalletBalance/WalletBalance';
+import { isGreaterThanLgBreakpoint } from 'common/utils';
 import SideMenus from '../SideMenus/SideMenus';
+
 import styles from './SideDrawer.module.css';
 
 export const SideDrawer = () => {
@@ -100,7 +102,16 @@ export const SideDrawer = () => {
 
   return (
     <nav
-      className={drawerOpen ? styles.Drawer : styles.NavClose}
+      onMouseOver={() => {
+        if (!isGreaterThanLgBreakpoint()) setDrawerOpen(true);
+      }}
+      onMouseLeave={() => {
+        if (!isGreaterThanLgBreakpoint()) setDrawerOpen(false);
+      }}
+      onFocus={() => {
+        if (!isGreaterThanLgBreakpoint()) setDrawerOpen(true);
+      }}
+      className={drawerOpen && isGreaterThanLgBreakpoint() ? styles.Drawer : styles.NavClose}
       aria-label="navigation menus"
       data-testid="navbar"
     >
@@ -124,7 +135,6 @@ export const SideDrawer = () => {
         </Drawer>
       </Hidden>
       <Drawer
-        className={drawerOpen ? styles.DrawerOpen : styles.DrawerClose}
         classes={{
           paper: drawerOpen ? styles.DrawerOpen : styles.DrawerClose,
         }}

src/components/UI/Pager/Pager.module.css

@@ -41,7 +41,7 @@
   position: fixed;
   display: flex !important;
   justify-content: flex-end !important;
-  width: calc(100% - 243px);
+  width: 100%;
   background: #f9f7f3;
   bottom: 0px;
   right: 4px;

src/containers/List/List.tsx

@@ -245,7 +245,7 @@ export const List = ({
     filterItemsQuery,
     {
       variables: filterPayload(),
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: 'cache-first',
     }
   );
 
@@ -259,7 +259,7 @@ export const List = ({
 
   useEffect(() => {
     refetchCount();
-  }, [filterPayload, searchVal, filters]);
+  }, [searchVal]);
 
   useEffect(() => {
     if (userRole.length === 0) {