@sikka/hawa 0.0.43 → 0.0.45

package/src/layout/HawaLayout.js

@@ -0,0 +1,80 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import "flowbite";
+import HawaDrawerItem from "../elements/HawaDrawerItem";
+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"
+      >
+        <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>
+
+      <div
+        id="drawer-navigation"
+        class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
+        tabindex="-1"
+        aria-labelledby="drawer-navigation-label"
+      >
+        <h5
+          id="drawer-navigation-label"
+          class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"
+        >
+          {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>
+        <div class="py-4 overflow-y-auto">
+          <ul class="space-y-2">
+            {props.drawerItems.map((item, i) => {
+              return <HawaDrawerItem key={i} text={item.text} />;
+            })}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ResponsiveButton.propTypes = {
+//   buttonText: PropTypes.string,
+//   onClick: PropTypes.func,
+//   showText: PropTypes.bool,
+// };

package/src/layout/index.js

@@ -3,3 +3,6 @@ export * from "./HawaAppLayout";
 export * from "./HawaDialog";
 export * from "./HawaAppBar";
 export * from "./HawaPageControls";
+export * from "./HawaBottomAppBar";
+export * from "./HawaDrawer";
+export * from "./HawaLayout";