@sikka/hawa 0.0.45 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaDrawerItem.js

@@ -1,13 +1,15 @@
 import React from "react";
 
 const HawaDrawerItem = (props) => {
+  let withIcon =
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+  let withoutIcon =
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+
   return (
-    <li>
-      <a
-        href="#"
-        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-      >
-        <svg
+    <li onClick={props.action}>
+      <div className={props.icon ? withIcon : withoutIcon}>
+        {/* <svg
           aria-hidden="true"
           class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
           fill="currentColor"
@@ -16,9 +18,9 @@ const HawaDrawerItem = (props) => {
         >
           <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
           <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-        </svg>
+        </svg> */}
         <span class="ml-3">{props.text}</span>
-      </a>
+      </div>
     </li>
   );
 };

package/src/elements/HawaItemCard.js

@@ -9,52 +9,174 @@ export const HawaItemCard = (props) => {
     props.onCardClick();
   };
   return (
-    <Container
-      onClick={handleParentClick}
-      maxWidth="xs"
-      variant="card-container"
-      dataValue="parent"
-      //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-      style={{ direction: isArabic ? "rtl" : "ltr" }}
+    <div
+      // href="#"
+      class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 "
     >
-      {props.header && (
-        <Container style={{ zIndex: 20 }} variant="card-header">
-          {props.headerActions && (
-            <div
-              style={{
-                margin: 0,
-                marginRight: -20,
-                marginLeft: -20,
-                marginBottom: -20,
-                // backgroundColor: "red",
-                display: "flex",
-                paddingTop: 5,
-                paddingLeft: 5,
-                paddingRight: 5,
-                justifyContent: "flex-end"
-              }}
+      <div class="flex justify-end pr-6">
+        <button
+          id="dropdownButton"
+          data-dropdown-toggle="dropdown"
+          class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
+          type="button"
+        >
+          <span class="sr-only">Open dropdown</span>
+          <svg
+            class="w-6 h-6"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+          </svg>
+        </button>
+        <div
+          id="dropdown"
+          class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        >
+          <ul class="py-1" aria-labelledby="dropdownButton">
+            <li>
+              <a
+                href="#"
+                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >
+                Edit
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >
+                Export Data
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >
+                Delete
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="px-6">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so
+          far, in reverse chronological order.
+        </p>
+      </div>
+      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
+        <div class="inline-flex rounded-md shadow-sm" role="group">
+          <button
+            type="button"
+            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
+          >
+            <svg
+              aria-hidden="true"
+              class="mr-0 w-4 h-4 fill-current"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              {props.headerActions}
-            </div>
-          )}
-          {props.header}
-        </Container>
-      )}
-      {props.content && (
-        <Container style={{ zIndex: 20 }} variant="card-content">
-          {props.content}
-        </Container>
-      )}
+              <path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            {/* Profile */}
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
+          >
+            <svg
+              aria-hidden="true"
+              class="mr-0 w-4 h-4 fill-current"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
+            </svg>
+            {/* Settings */}
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
+          >
+            <svg
+              aria-hidden="true"
+              class="mr-0 w-4 h-4 fill-current"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            {/* Downloads */}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    // <Container
+    //   onClick={handleParentClick}
+    //   maxWidth="xs"
+    //   variant="card-container"
+    //   dataValue="parent"
+    //   //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+    //   style={{ direction: isArabic ? "rtl" : "ltr" }}
+    // >
+    //   {props.header && (
+    //     <Container style={{ zIndex: 20 }} variant="card-header">
+    //       {props.headerActions && (
+    //         <div
+    //           style={{
+    //             margin: 0,
+    //             marginRight: -20,
+    //             marginLeft: -20,
+    //             marginBottom: -20,
+    //             // backgroundColor: "red",
+    //             display: "flex",
+    //             paddingTop: 5,
+    //             paddingLeft: 5,
+    //             paddingRight: 5,
+    //             justifyContent: "flex-end"
+    //           }}
+    //         >
+    //           {props.headerActions}
+    //         </div>
+    //       )}
+    //       {props.header}
+    //     </Container>
+    //   )}
+    //   {props.content && (
+    //     <Container style={{ zIndex: 20 }} variant="card-content">
+    //       {props.content}
+    //     </Container>
+    //   )}
 
-      {props.actions && (
-        <Container style={{ zIndex: 20 }} variant="card-actions">
-          {props.actions}
-        </Container>
-      )}
-    </Container>
+    //   {props.actions && (
+    //     <Container style={{ zIndex: 20 }} variant="card-actions">
+    //       {props.actions}
+    //     </Container>
+    //   )}
+    // </Container>
   );
 };
 HawaItemCard.propTypes = {
   lang: PropTypes.string,
-  onCardClick: PropTypes.func,
+  onCardClick: PropTypes.func
 };

package/src/elements/HawaSnackbar.js

@@ -1,47 +1,44 @@
-import React, { useEffect, useState } from "react";
-import Snackbar from "@mui/material/Snackbar";
-import AlertTitle from "@mui/material/AlertTitle";
-import Alert from "@mui/material/Alert";
-import { IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import "flowbite";
 
 export const HawaSnackbar = (props) => {
-  const [position, setPosition] = useState({ vertical: "", horizontal: "" });
-
-  useEffect(() => {
-    if (props.position) {
-      const p = props.position.split("-");
-      setPosition({ vertical: p[0], horizontal: p[1] });
-    }
-  }, [props.position]);
-
+  let severities = {
+    info: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-blue-700 bg-blue-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
+    warning:
+      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-yellow-700 bg-yellow-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
+    error:
+      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-red-700 bg-red-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
+    success:
+      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-green-700 bg-green-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
+    none: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+  };
   return (
-    <Snackbar
-      open={props.open}
-      autoHideDuration={props.autoHide ? props.duration : null}
-      onClose={props.handleClose}
-      anchorOrigin={position}
-      action={
-        <>
-          <IconButton
-            aria-label="close"
-            style={{ color: "black" }}
-            sx={{ p: 0.5 }}
-            onClick={props.handleClose}
-          >
-            <CloseIcon />
-          </IconButton>
-        </>
-      }
-    >
-      <Alert
-        icon={false}
-        severity={props.severity}
-        onClose={props.isClosable ? props.handleClose : null}
+    <div id="toast-default" role="alert" className={severities[props.severity]}>
+      <div>
+        <div class="ml-3 text-sm font-bold">{props.title}</div>
+        <div class="ml-3 text-sm font-normal">{props.text}</div>
+      </div>
+      <button
+        type="button"
+        class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+        data-dismiss-target="#toast-default"
+        aria-label="Close"
       >
-        {props.title && <AlertTitle>{props.title}</AlertTitle>}
-        {props.text}
-      </Alert>
-    </Snackbar>
+        <span class="sr-only">Close</span>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </button>
+    </div>
   );
 };

package/src/elements/HawaSwitch.js

@@ -1,6 +1,21 @@
 import React from "react";
-import Switch from "@mui/material/Switch";
 
 export const HawaSwitch = (props) => {
-  return <Switch {...props} />;
+  return (
+    <label
+      for="default-toggle"
+      class="inline-flex relative items-center cursor-pointer"
+    >
+      <input
+        type="checkbox"
+        value=""
+        id="default-toggle"
+        class="sr-only peer"
+      />
+      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+        {props.text}
+      </span>
+    </label>
+  );
 };

package/src/elements/HawaTextField.js

@@ -1,32 +1,25 @@
 import React from "react";
-import Input from "@mui/material/Input";
-import InputLabel from "@mui/material/InputLabel";
-import Typography from "@mui/material/Typography";
 
 export const HawaTextField = (props) => {
   return (
-    <div style={props.inForm && { width: "100%" }}>
-      <div style={{ width: props.fullWidth ? "100%" : "fit-content" }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center"
-          }}
-        >
-          {props.label && <InputLabel>{props.label}</InputLabel>}
-          {props.helperText && (
-            <Typography
-              style={{ marginBottom: !props.label && 10 }}
-              variant="validation"
-            >
-              {props.helperText}
-            </Typography>
-          )}
-        </div>
-        <Input disableUnderline {...props} />
-      </div>
+    <div>
+      <label
+        for="first_name"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        {props.label}
+      </label>
+      <input
+        {...props}
+        class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      />
+
+      {props.helperText && (
+        <p class="mt-2 text-sm text-red-600 dark:text-red-500">
+          {/* <span class="font-medium">Oh, snapp!</span> */}
+          {props.helperText}
+        </p>
+      )}
     </div>
   );
 };

package/src/elements/index.js

@@ -1,6 +1,7 @@
 export * from "./ResponsiveButton";
 export * from "./ActionButton";
 export * from "./HawaSnackbar";
+export * from "./HawaSwitch";
 export * from "./HawaCheckbox";
 export * from "./HawaPanelTabs";
 export * from "./HawaChip";

package/src/layout/HawaLayout.js

@@ -1,32 +1,144 @@
 import React from "react";
-// import PropTypes from "prop-types";
+import PropTypes from "prop-types";
 import "flowbite";
 import HawaDrawerItem from "../elements/HawaDrawerItem";
+
+const MenuButton = () => {
+  return (
+    <button
+      data-drawer-target="drawer-navigation"
+      data-drawer-show="drawer-navigation"
+      aria-controls="drawer-navigation"
+      type="button"
+      class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    >
+      <span class="sr-only">Open main menu</span>
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  );
+};
+
+const ProfileItem = (props) => {
+  return (
+    <li>
+      <a
+        href={props.link}
+        className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      >
+        {props.text}
+      </a>
+    </li>
+  );
+};
+const CloseButton = () => {
+  return (
+    <button
+      type="button"
+      data-drawer-dismiss="drawer-navigation"
+      aria-controls="drawer-navigation"
+      className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  );
+};
 export const HawaLayout = (props) => {
   return (
-    <div>
-      <button
-        data-drawer-target="drawer-navigation"
-        data-drawer-show="drawer-navigation"
-        aria-controls="drawer-navigation"
-        type="button"
-        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    <div className="font-plex">
+      <div>
+        <nav class="border-gray-200 rounded dark:bg-gray-900">
+          <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
+            <div href={props.logoHref} class="flex items-center">
+              <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
+            </div>
+            <div className="flex flex-row-reverse">
+              <MenuButton />
+
+              <div
+                data-dropdown-toggle="userDropdown"
+                data-dropdown-placement="bottom-start"
+                class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
+              >
+                <svg
+                  class="absolute -left-1 w-12 h-12 text-gray-400"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </div>
+
+              {/* <img
+                id="avatarButton"
+                type="button"
+                data-dropdown-toggle="userDropdown"
+                data-dropdown-placement="bottom-start"
+                class="w-10 h-10 rounded-full cursor-pointer"
+                src="/docs/images/people/profile-picture-5.jpg"
+                alt="User dropdown"
+              /> */}
+            </div>
+          </div>
+        </nav>
+      </div>
+      <div
+        id="userDropdown"
+        class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+        data-popper-reference-hidden=""
+        data-popper-escaped=""
+        data-popper-placement="bottom-start"
+        // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
       >
-        <span class="sr-only">Open main menu</span>
-        <svg
-          aria-hidden="true"
-          class="w-6 h-6"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
+        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+          <div>{props.username}</div>
+          <div class="font-medium truncate">{props.userEmail}</div>
+        </div>
+        <ul
+          class="py-1 text-sm text-gray-700 dark:text-gray-200"
+          aria-labelledby="avatarButton"
         >
-          <path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </button>
+          {props.profileItems.map((it) => {
+            return <ProfileItem text={it.text} link={it.slug} />;
+          })}
+        </ul>
+        <div class="py-1">
+          <a
+            href="#"
+            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          >
+            Sign out
+          </a>
+        </div>
+      </div>
 
       <div
         id="drawer-navigation"
@@ -40,41 +152,29 @@ export const HawaLayout = (props) => {
         >
           {props.appTitle}
         </h5>
-        <button
-          type="button"
-          data-drawer-dismiss="drawer-navigation"
-          aria-controls="drawer-navigation"
-          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-        >
-          <svg
-            aria-hidden="true"
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-          <span class="sr-only">Close menu</span>
-        </button>
+        <CloseButton />
         <div class="py-4 overflow-y-auto">
           <ul class="space-y-2">
             {props.drawerItems.map((item, i) => {
-              return <HawaDrawerItem key={i} text={item.text} />;
+              return (
+                <HawaDrawerItem action={item.action} key={i} text={item.text} />
+              );
             })}
           </ul>
         </div>
       </div>
+      <div className="p-3">{props.children}</div>
     </div>
   );
 };
 
-// ResponsiveButton.propTypes = {
-//   buttonText: PropTypes.string,
-//   onClick: PropTypes.func,
-//   showText: PropTypes.bool,
-// };
+HawaLayout.propTypes = {
+  logoLink: PropTypes.string,
+  username: PropTypes.string,
+  userEmail: PropTypes.string,
+  drawerItems: PropTypes.objectOf({
+    text: PropTypes.string,
+    slug: PropTypes.string,
+    action: PropTypes.func
+  })
+};