@acuteinfo/common-screens 1.0.28 → 1.0.30

package/dist/index.js

@@ -2549,60 +2549,64 @@ const checkDateAndDisplay = (dateStr) => {
 };
 
 const drawerWidth = 227;
-const useStyles = makeStyles((theme) => ({
-    drawerPaper: {
-        position: "relative",
-        whiteSpace: "nowrap",
-        width: drawerWidth,
-        background: theme.palette.info.dark,
-        transition: theme.transitions.create("width", {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-        border: "none",
-        overflow: "hidden",
-        zIndex: 120,
-    },
-    drawerPaperClose: {
-        overflowX: "hidden",
-        transition: theme.transitions.create("width", {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(8),
-        [theme.breakpoints.up("sm")]: {
-            width: theme.spacing(8),
+const drawerWidthClosed = 65;
+const useStyles = makeStyles((theme) => {
+    return {
+        drawerPaper: {
+            position: "relative",
+            whiteSpace: "nowrap",
+            width: drawerWidth,
+            // transition: theme.transitions.create("width", {
+            //   easing: theme.transitions.easing.sharp,
+            //   duration: theme.transitions.duration.enteringScreen,
+            // }),
+            transition: ".5s ease",
+            border: "none",
+            overflow: "hidden",
+            zIndex: 120,
         },
-    },
-    toolbarIcon: {
-        display: "flex",
-        alignItems: "center",
-        zIndex: 9999,
-        ...theme.mixins.toolbar,
-        background: "var(--theme-color2)",
-        justifyContent: "center",
-        height: "80px",
-        // borderBottom: "1px dashed #949597",
-    },
-    hrCSS: {
-        zIndex: 9999,
-    },
-    buttonLink: {
-        backgroundColor: "transparent",
-        border: "none",
-        cursor: "pointer",
-        textDecoration: "underline",
-        display: "inline",
-        margin: 0,
-        padding: 0,
-        "&:focus": {
-            textDecoration: "none",
+        drawerPaperClose: {
+            overflowX: "hidden",
+            // transition: theme.transitions.create("width", {
+            //   easing: theme.transitions.easing.sharp,
+            //   duration: theme.transitions.duration.leavingScreen,
+            // }),
+            transition: ".5s ease",
+            width: drawerWidthClosed,
+            [theme.breakpoints.up("sm")]: {
+                width: drawerWidthClosed,
+            },
         },
-        "$:hover": {
-            textDecoration: "none",
+        toolbarIcon: {
+            display: "flex",
+            alignItems: "center",
+            zIndex: 9999,
+            ...theme.mixins.toolbar,
+            background: "var(--theme-color2)",
+            justifyContent: "center",
+            height: "80px",
+            // borderBottom: "1px dashed #949597",
         },
-    },
-}));
+        hrCSS: {
+            zIndex: 9999,
+        },
+        buttonLink: {
+            backgroundColor: "transparent",
+            border: "none",
+            cursor: "pointer",
+            textDecoration: "underline",
+            display: "inline",
+            margin: 0,
+            padding: 0,
+            "&:focus": {
+                textDecoration: "none",
+            },
+            "$:hover": {
+                textDecoration: "none",
+            },
+        },
+    };
+});
 /*
   
 */