@sikka/hawa 0.0.30 → 0.0.33

package/src/layout/HawaAppLayout.js

@@ -16,8 +16,6 @@ import ListItemText from "@mui/material/ListItemText";
 import Avatar from "@mui/material/Avatar";
 import Tooltip from "@mui/material/Tooltip";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
-// use this to detect size and change things accordingly
-// import useMediaQuery from '@mui/material/useMediaQuery';
 
 const drawerWidth = 240;
 
@@ -36,16 +34,16 @@ const closedMixin = (theme) => ({
     duration: theme.transitions.duration.leavingScreen
   }),
   overflowX: "hidden",
-  width: `calc(${theme.spacing(7)} + 1px)`,
+  width: `calc(${theme.spacing(8)} + 1px)`,
   [theme.breakpoints.up("sm")]: {
     width: `calc(${theme.spacing(8)} + 1px)`
   }
 });
 
-const DrawerHeader = styled("div")(({ theme }) => ({
+const DrawerHeader = styled("div")(({ theme, direction }) => ({
   display: "flex",
   alignItems: "center",
-  justifyContent: "flex-end",
+  justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
   padding: theme.spacing(0, 1),
   // necessary for content to be below app bar
   ...theme.mixins.toolbar
@@ -53,14 +51,16 @@ const DrawerHeader = styled("div")(({ theme }) => ({
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
+})(({ theme, open, direction }) => ({
   zIndex: theme.zIndex.drawer + 1,
   transition: theme.transitions.create(["width", "margin"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
+
   ...(open && {
-    marginLeft: drawerWidth,
+    marginLeft: direction === "rtl" ? 0 : drawerWidth,
+    marginRight: direction === "rtl" ? drawerWidth : 0,
     width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(["width", "margin"], {
       easing: theme.transitions.easing.sharp,
@@ -89,7 +89,7 @@ const Drawer = styled(MuiDrawer, {
 export function HawaAppLayout(props) {
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
-
+  const isArabic = props.lang === "ar";
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -101,14 +101,23 @@ export function HawaAppLayout(props) {
   const handleDrawerClose = () => setOpen(false);
 
   return (
-    <Box sx={{ display: "flex" }}>
-      <AppBar variant="appbar" position="fixed" open={open}>
-        <Toolbar variant="appbar">
+    <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
+      <AppBar
+        variant="appbar"
+        position="fixed"
+        open={open}
+        direction={isArabic ? "rtl" : "ltr"}
+      >
+        <Toolbar
+          variant="appbar"
+          sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
+        >
           <IconButton
             color="inherit"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
+            s
             sx={{
               marginRight: 5,
               ...(open && { display: "none" })
@@ -134,7 +143,11 @@ export function HawaAppLayout(props) {
 
             <Box>
               <Tooltip title="Open settings">
-                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <IconButton
+                  onClick={handleOpenUserMenu}
+                  sx={{ p: 0 }}
+                  size="small"
+                >
                   <Avatar />
                 </IconButton>
               </Tooltip>
@@ -147,8 +160,13 @@ export function HawaAppLayout(props) {
           </div>
         </Toolbar>
       </AppBar>
-      <Drawer variant="permanent" open={open}>
-        <DrawerHeader>
+      <Drawer
+        // anchor="left"
+
+        variant="permanent"
+        open={open}
+      >
+        <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
           {props.logo}
           <IconButton onClick={handleDrawerClose}>
             {theme.direction === "rtl" ? (

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.8ffaa38a.iframe.bundle.js"></script><script src="main.cbf6de78.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.a7262b49.iframe.bundle.js"></script><script src="main.2511f65a.iframe.bundle.js"></script></body></html>