@sikka/hawa 0.0.19 → 0.0.22

package/src/{elements → layout}/HawaAppBar.js

@@ -11,11 +11,13 @@ import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
+import { useTheme } from "@mui/material";
 
 const pages = ["Products", "Pricing", "Blog"];
 const settings = ["Profile", "Account", "Dashboard", "Logout"];
 
 export const HawaAppBar = (props) => {
+  const theme = useTheme();
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -33,9 +35,9 @@ export const HawaAppBar = (props) => {
   const handleCloseUserMenu = () => {
     setAnchorElUser(null);
   };
-
+  console.log("theme is ", theme);
   return (
-    <AppBar position="static">
+    <AppBar position="static" variant="appbar">
       <Container maxWidth="xl" variant="appbar">
         <Toolbar disableGutters>
           <Typography
@@ -96,7 +98,7 @@ export const HawaAppBar = (props) => {
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: "white", display: "block" }}
+                sx={{ my: 2, display: "block" }}
               >
                 {page}
               </Button>
@@ -124,10 +126,21 @@ export const HawaAppBar = (props) => {
               }}
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
+              variant="themed"
+              PaperProps={{
+                style: {
+                  boxShadow: "none",
+                  borderRadius: theme.allBorderRadius,
+                  // borderColor: theme.primaryActionColor,
+                  // borderWidth: 2,
+                  border: `1px solid ${theme.primaryActionColor}`
+                }
+              }}
             >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
+              {props.accountMenu.map((setting) => (
+                <MenuItem key={setting.label} onClick={setting.action}>
+                  {setting.icon && <setting.icon />}
+                  <Typography textAlign="center">{setting.label}</Typography>
                 </MenuItem>
               ))}
             </Menu>

package/src/layout/HawaAppLayout.js

@@ -5,7 +5,6 @@ import MuiDrawer from "@mui/material/Drawer";
 import MuiAppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import List from "@mui/material/List";
-// import CssBaseline from "@mui/material/CssBaseline";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
@@ -13,15 +12,9 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-import MailIcon from "@mui/icons-material/Mail";
-import { HawaListItem } from "../elements";
 import Menu from "@mui/material/Menu";
-import Container from "@mui/material/Container";
 import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 
@@ -152,7 +145,7 @@ export function HawaAppLayout(props) {
             }}
           >
             <Typography variant="h6" noWrap component="div">
-              Page name here
+              {props.pageTitle}
             </Typography>
 
             <Box>
@@ -176,10 +169,21 @@ export function HawaAppLayout(props) {
                 }}
                 open={Boolean(anchorElUser)}
                 onClose={handleCloseUserMenu}
+                variant="themed"
+                PaperProps={{
+                  style: {
+                    boxShadow: "none",
+                    borderRadius: theme.allBorderRadius,
+                    // borderColor: theme.primaryActionColor,
+                    // borderWidth: 2,
+                    border: `1px solid ${theme.primaryActionColor}`
+                  }
+                }}
               >
-                {[2, 3, 4].map((setting) => (
-                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                    <Typography textAlign="center">{setting}</Typography>
+                {props.accountMenu.map((setting) => (
+                  <MenuItem key={setting.label} onClick={setting.action}>
+                    {setting.icon && <setting.icon />}
+                    <Typography textAlign="center">{setting.label}</Typography>
                   </MenuItem>
                 ))}
               </Menu>
@@ -200,42 +204,39 @@ export function HawaAppLayout(props) {
         </DrawerHeader>
         <Divider />
         <List>
-          {props.pages.map((t) => {
+          {props.pages.map((p, jk) => {
             return (
-              <HawaListItem
-                open={open}
-                text={t.text}
-                selected={props.pageName.toLowerCase() === t.text}
-                // icon={<ChevronLeftIcon />}
-                icon={t.icon}
-              />
+              <Tooltip
+                title={p.text}
+                key={jk}
+                placement={"right"}
+                arrow={true}
+                PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              >
+                <ListItemButton
+                  variant={
+                    props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
+                    "clicked"
+                  }
+                  onClick={p.action}
+                  key={p.text}
+                  sx={{
+                    minHeight: 48,
+                    justifyContent: open ? "initial" : "center",
+                    px: 2.5
+                  }}
+                >
+                  <p.icon />
+                  <div style={{ width: 20 }} />
+                  <ListItemText
+                    primary={p.text}
+                    sx={{ opacity: open ? 1 : 0 }}
+                  />
+                </ListItemButton>
+              </Tooltip>
             );
           })}
         </List>
-        <Divider />
-        <List>
-          {["All mail", "Trash", "Spam"].map((text, index) => (
-            <ListItemButton
-              key={text}
-              sx={{
-                minHeight: 48,
-                justifyContent: open ? "initial" : "center",
-                px: 2.5
-              }}
-            >
-              <ListItemIcon
-                sx={{
-                  minWidth: 0,
-                  mr: open ? 3 : "auto",
-                  justifyContent: "center"
-                }}
-              >
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
-            </ListItemButton>
-          ))}
-        </List>
       </Drawer>
       <Box sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />

package/src/layout/HawaDialog.js

@@ -1,11 +1,9 @@
 import CloseIcon from "@mui/icons-material/Close";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton
-} from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
 import React, { useState } from "react";
 
 const BootstrapDialogTitle = (props) => {

package/src/layout/index.js

@@ -1,3 +1,4 @@
 export * from "./Box";
 export * from "./HawaAppLayout";
 export * from "./HawaDialog";
+export * from "./HawaAppBar";

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.ae39b38c.iframe.bundle.js"></script><script src="main.894e2873.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.7097848f.iframe.bundle.js"></script><script src="main.f236f782.iframe.bundle.js"></script></body></html>