@asaleh37/ui-base 25.8.1-3 → 25.8.1-6

package/src/layout/MobileDrawer.tsx

@@ -1,103 +1,103 @@
-import { styled } from "@mui/material/styles";
-import { grey } from "@mui/material/colors";
-import SwipeableDrawer from "@mui/material/SwipeableDrawer";
-import { useDispatch, useSelector } from "react-redux";
-import { Box, Typography } from "@mui/material";
-import { AppLayoutActions } from "../redux/features/common/AppLayoutSlice";
-import NavigationTree from "./NavigationTree";
-import { setSideBarState } from "../redux/features/common/SideBarSlice";
-
-const drawerBleeding = 56;
-
-interface Props {
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window?: () => Window;
-}
-
-const Puller = styled("div")(({ theme }) => ({
-  width: 30,
-  height: 6,
-  margin: 10,
-  backgroundColor: grey[300],
-  borderRadius: 3,
-  //   position: "absolute",
-  top: 8,
-  //   left: "calc(50% - 15px)",
-  ...theme.applyStyles("dark", {
-    backgroundColor: grey[900],
-  }),
-}));
-
-export default function MobileDrawer(props: Props) {
-  const { window } = props;
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const dispatch = useDispatch();
-  const toggleDrawer = (newState: boolean) => {
-    dispatch(setSideBarState(newState));
-  };
-  // This is used only for the example
-  const container =
-    window !== undefined ? () => window().document.body : undefined;
-
-  return (
-    <SwipeableDrawer
-      container={container}
-      anchor="bottom"
-      open={SideBarState.isOpened}
-      onClose={() => {
-        toggleDrawer(false);
-      }}
-      onOpen={() => {
-        toggleDrawer(true);
-      }}
-      swipeAreaWidth={drawerBleeding}
-      disableSwipeToOpen={false}
-      ModalProps={{
-        keepMounted: true,
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          height: "100%",
-          overflow: "hidden",
-        }}
-      >
-        <Puller />
-        <Box
-          sx={{
-            flexGrow: 1,
-            display: "flex",
-            justifyContent: "center",
-            width: "99%",
-            overflowY: "auto",
-          }}
-        >
-          <NavigationTree />
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-around",
-            marginTop: 1,
-            width: "100%",
-          }}
-        >
-          <Typography sx={{ fontSize: 12 }} color="textDisabled">
-            {AppInfo.appName}
-          </Typography>
-          <Typography sx={{ fontSize: 12 }} color="textDisabled">
-            V.{AppInfo.appVersion}
-          </Typography>
-        </Box>
-      </Box>
-    </SwipeableDrawer>
-  );
-}
+import { styled } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import { useDispatch, useSelector } from "react-redux";
+import { Box, Typography } from "@mui/material";
+import { AppLayoutActions } from "../redux/features/common/AppLayoutSlice";
+import NavigationTree from "./NavigationTree";
+import { setSideBarState } from "../redux/features/common/SideBarSlice";
+
+const drawerBleeding = 56;
+
+interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  window?: () => Window;
+}
+
+const Puller = styled("div")(({ theme }) => ({
+  width: 30,
+  height: 6,
+  margin: 10,
+  backgroundColor: grey[300],
+  borderRadius: 3,
+  //   position: "absolute",
+  top: 8,
+  //   left: "calc(50% - 15px)",
+  ...theme.applyStyles("dark", {
+    backgroundColor: grey[900],
+  }),
+}));
+
+export default function MobileDrawer(props: Props) {
+  const { window } = props;
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const dispatch = useDispatch();
+  const toggleDrawer = (newState: boolean) => {
+    dispatch(setSideBarState(newState));
+  };
+  // This is used only for the example
+  const container =
+    window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <SwipeableDrawer
+      container={container}
+      anchor="bottom"
+      open={SideBarState.isOpened}
+      onClose={() => {
+        toggleDrawer(false);
+      }}
+      onOpen={() => {
+        toggleDrawer(true);
+      }}
+      swipeAreaWidth={drawerBleeding}
+      disableSwipeToOpen={false}
+      ModalProps={{
+        keepMounted: true,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          height: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <Puller />
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "center",
+            width: "99%",
+            overflowY: "auto",
+          }}
+        >
+          <NavigationTree />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-around",
+            marginTop: 1,
+            width: "100%",
+          }}
+        >
+          <Typography sx={{ fontSize: 12 }} color="textDisabled">
+            {AppInfo.appName}
+          </Typography>
+          <Typography sx={{ fontSize: 12 }} color="textDisabled">
+            V.{AppInfo.appVersion}
+          </Typography>
+        </Box>
+      </Box>
+    </SwipeableDrawer>
+  );
+}