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

package/src/layout/SideBar.tsx

@@ -1,85 +1,85 @@
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Drawer from "@mui/material/Drawer";
-import { useDispatch, useSelector } from "react-redux";
-import { DrawerHeader } from "./DrawerHeader";
-import { Box, Typography, useTheme } from "@mui/material";
-import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
-import NavigationTree from "./NavigationTree";
-import { useSession } from "../hooks";
-import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
-
-const SideBar: React.FC = () => {
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const { UserSession } = useSession();
-  const currentOrganization = UserSession.value.currentOrganization;
-  const theme = useTheme();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const SideBarState = useSelector((state: any) => state.SideBar);
-  const dispatch = useDispatch();
-  const toggleSideBar = () => {
-    dispatch(toggleSideBarState());
-  };
-  return (
-    <Drawer
-      sx={{
-        width: DRAWER_WIDTH,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
-          width: DRAWER_WIDTH,
-          boxSizing: "border-box",
-        },
-      }}
-      variant="persistent"
-      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
-      open={SideBarState.isOpened}
-    >
-      <DrawerHeader>
-        <Box sx={{ width: "100%" }}>
-          <Typography
-            color="primary"
-            sx={{
-              width: "100%",
-              textAlign: "center",
-              fontSize: 18,
-              fontWeight: "bold",
-            }}
-          >
-            System Content
-          </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              marginTop: 1,
-            }}
-          >
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              {`${AppInfo.appName} - ${
-                AppLayout.appDirection === "ltr"
-                  ? currentOrganization?.organizationEnName
-                  : currentOrganization?.organizationArName
-              }`}
-            </Typography>
-            <Typography sx={{ fontSize: 12 }} color="textDisabled">
-              V.{AppInfo.appVersion}
-            </Typography>
-          </Box>
-        </Box>
-        <IconButton onClick={toggleSideBar}>
-          {theme.direction === "ltr" ? (
-            <FontAwesomeIcon icon="angle-left" />
-          ) : (
-            <FontAwesomeIcon icon="angle-right" />
-          )}
-        </IconButton>
-      </DrawerHeader>
-      <Divider />
-      <NavigationTree />
-    </Drawer>
-  );
-};
-
-export default SideBar;
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Drawer from "@mui/material/Drawer";
+import { useDispatch, useSelector } from "react-redux";
+import { DrawerHeader } from "./DrawerHeader";
+import { Box, Typography, useTheme } from "@mui/material";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+import NavigationTree from "./NavigationTree";
+import { useSession } from "../hooks";
+import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+
+const SideBar: React.FC = () => {
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const { UserSession } = useSession();
+  const currentOrganization = UserSession.value.currentOrganization;
+  const theme = useTheme();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const dispatch = useDispatch();
+  const toggleSideBar = () => {
+    dispatch(toggleSideBarState());
+  };
+  return (
+    <Drawer
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="persistent"
+      anchor={AppLayout.appDirection === "ltr" ? "left" : "right"}
+      open={SideBarState.isOpened}
+    >
+      <DrawerHeader>
+        <Box sx={{ width: "100%" }}>
+          <Typography
+            color="primary"
+            sx={{
+              width: "100%",
+              textAlign: "center",
+              fontSize: 18,
+              fontWeight: "bold",
+            }}
+          >
+            System Content
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              marginTop: 1,
+            }}
+          >
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              {`${AppInfo.appName} - ${
+                AppLayout.appDirection === "ltr"
+                  ? currentOrganization?.organizationEnName
+                  : currentOrganization?.organizationArName
+              }`}
+            </Typography>
+            <Typography sx={{ fontSize: 12 }} color="textDisabled">
+              V.{AppInfo.appVersion}
+            </Typography>
+          </Box>
+        </Box>
+        <IconButton onClick={toggleSideBar}>
+          {theme.direction === "ltr" ? (
+            <FontAwesomeIcon icon="angle-left" />
+          ) : (
+            <FontAwesomeIcon icon="angle-right" />
+          )}
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      <NavigationTree />
+    </Drawer>
+  );
+};
+
+export default SideBar;