@sikka/hawa 0.0.265 → 0.0.267

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import { HiMenu } from "react-icons/hi"
-import { FaChevronRight } from "react-icons/fa"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { HawaButton, HawaMenu } from "../elements"
-
-// TODO: when no pagetitle, navbar gets messy
+import { HawaMenu } from "../elements"
 
 type HawaAppLayoutTypes = {
+  /** The pages of the side drawer */
   drawerItems: {
     label: string
     icon: any
@@ -16,7 +13,9 @@ type HawaAppLayoutTypes = {
     action: () => void
     subItems?: any
   }[][]
+  // The direction of the layout
   direction?: "rtl" | "ltr"
+  // The title of the current selected page, make sure it's the same as the drawerItem slug
   currentPage: string
   pageTitle?: string
   logoSymbol?: any
@@ -29,6 +28,7 @@ type HawaAppLayoutTypes = {
   drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItems[][]
   onSettingsClick?: () => void
+  DrawerFooterActions: any
 }
 
 type MenuItems = {
@@ -39,7 +39,13 @@ type MenuItems = {
 }
 export const HawaAppLayoutSimplified: React.FunctionComponent<
   HawaAppLayoutTypes
-> = ({ direction = "rtl", drawerSize = "md", onSettingsClick, ...props }) => {
+> = ({
+  direction = "rtl",
+  drawerSize = "md",
+  onSettingsClick,
+  DrawerFooterActions,
+  ...props
+}) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
   const [openSubItem, setOpenSubitem] = useState("")
   const { isOpen, onClose, onOpen } = useDiscloser(false)
@@ -92,35 +98,32 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         >
           {/* Nav Side Of Navbar */}
           {size > 600 ? (
-            props.pageTitle ? (
-              // Title of the page
-              <div
-                className={clsx(
-                  isRTL
-                    ? [size > 600 ? "mr-14" : "mr-2", keepOpen ? "mr-40" : ""]
-                    : [size > 600 ? "ml-14" : "ml-2", keepOpen ? "ml-40" : ""]
-                )}
-                style={
-                  isRTL
-                    ? {
-                        marginRight: `${
-                          drawerSizeStyle[keepOpen ? "opened" : "closed"][
-                            drawerSize
-                          ]
-                        }px`,
-                      }
-                    : {
-                        marginLeft: `${
-                          drawerSizeStyle[keepOpen ? "opened" : "closed"][
-                            drawerSize
-                          ]
-                        }px`,
-                      }
-                }
-              >
-                {props.pageTitle}
-              </div>
-            ) : null
+            <div
+              className={clsx(
+                isRTL
+                  ? [size > 600 ? "mr-14" : "mr-2", keepOpen ? "mr-40" : ""]
+                  : [size > 600 ? "ml-14" : "ml-2", keepOpen ? "ml-40" : ""]
+              )}
+              style={
+                isRTL
+                  ? {
+                      marginRight: `${
+                        drawerSizeStyle[keepOpen ? "opened" : "closed"][
+                          drawerSize
+                        ]
+                      }px`,
+                    }
+                  : {
+                      marginLeft: `${
+                        drawerSizeStyle[keepOpen ? "opened" : "closed"][
+                          drawerSize
+                        ]
+                      }px`,
+                    }
+              }
+            >
+              {props.pageTitle}
+            </div>
           ) : (
             // Mobile Drawer Menu Button
             <div
@@ -131,7 +134,22 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 onClick={() => setOpenSideMenu(true)}
                 className="z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
               >
-                <HiMenu size={25} />
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  height="1.6em"
+                  width="1.6em"
+                  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>
               </div>
               {/* Mobile Page Title */}
               {props.pageTitle ? (
@@ -147,14 +165,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               "flex gap-2",
               isRTL ? "flex-row-reverse" : "flex-row"
             )}
-            // dir={direction}
           >
             {/* User Info */}
             {size > 600 ? (
               <div
-                className={clsx(
-                  isRTL ? "text-left text-xs" : "text-right text-xs"
-                )}
+                className={isRTL ? "text-left text-xs" : "text-right text-xs"}
               >
                 <div className="font-bold">{props.username}</div>{" "}
                 <div>{props.email}</div>
@@ -187,9 +202,6 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
       <div
         className={clsx(
           "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip  transition-all",
-          // drawerDefaultStyle,
-          // "bg-green-400",
-          // drawerSizeStyle[drawerSize],
           isRTL ? "right-0" : "left-0"
         )}
         style={{
@@ -298,8 +310,9 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           )
                           ? "bg-buttonPrimary-500 text-white"
                           : "hover:bg-layoutPrimary-300",
-                        "m-2 my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
-                        isRTL ? "flex-row-reverse pr-3" : ""
+                        "my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
+                        isRTL ? "flex-row-reverse pr-3" : "",
+                        openSideMenu ? "m-2" : "m-2"
                       )}
                     >
                       <div className="flex flex-row" dir={direction}>
@@ -316,22 +329,28 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                         </div>
                       </div>
                       {dItem.subItems && (
-                        <div
-                          className={clsx(
+                        <ArrowIcon
+                          color={
+                            props.currentPage === dItem.slug ||
+                            dItem.subItems?.find(
+                              (e) => e.slug === props.currentPage
+                            )
+                              ? "white"
+                              : "black"
+                          }
+                          pointing={
                             openSubItem && dItem.slug === openSubItem
-                              ? "-rotate-90"
-                              : "rotate-90"
-                          )}
-                        >
-                          {/* <FaChevronRight fontSize={11} /> */}
-                        </div>
+                              ? "up"
+                              : "down"
+                          }
+                        />
                       )}
                     </div>
 
                     {dItem.subItems && (
                       <div
                         className={clsx(
-                          "m-1 flex cursor-pointer flex-col gap-0 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
+                          "m-1 mx-2 flex cursor-pointer flex-col gap-1 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
                           openSubItem == dItem.slug && openSideMenu
                             ? ""
                             : "my-0 py-0",
@@ -340,7 +359,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                         style={{
                           height:
                             openSubItem == dItem.slug && openSideMenu
-                              ? 6 + 33 * dItem.subItems?.length
+                              ? 6 + 35 * dItem.subItems?.length
                               : 0,
                         }}
                       >
@@ -348,7 +367,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           <div
                             key={s}
                             className={clsx(
-                              "flex flex-row gap-2 overflow-x-clip  rounded p-2 px-2 text-xs",
+                              "flex flex-row gap-2 overflow-x-clip  rounded-inner p-2 px-2 text-xs",
                               isRTL ? "text-right" : "text-left",
                               props.currentPage === subIt.slug
                                 ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
@@ -381,7 +400,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         </div>
         {/* Drawer Footer */}
         <div
-          className="fixed bottom-0 flex h-14 w-full items-center justify-center bg-layoutPrimary-500 transition-all"
+          className={clsx(
+            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 bg-layoutPrimary-500  transition-all",
+
+            direction === "rtl" ? "flex-row-reverse" : "flex-row"
+          )}
           style={{
             width:
               size > 600
@@ -389,19 +412,14 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? 160 : 0}px`,
           }}
         >
-          {onSettingsClick && (
-            <div
-              className=" cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700"
-              onClick={() => onSettingsClick()}
-            >
-              <SettingsIcon />
-            </div>
-          )}
+          {size > 600 && DrawerFooterActions && openSideMenu ? (
+            <>{DrawerFooterActions}</>
+          ) : null}
+
           {/* Expand Button */}
-          {size > 600 ? (
+          {size > 600 && openSideMenu ? (
             <div
               className={clsx("w-fit transition-all")}
-              // style={isRTL ? {} : {left: }}
               style={
                 isRTL
                   ? {
@@ -430,10 +448,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 <div
                   onClick={() => setKeepOpen(!keepOpen)}
                   className={
-                    "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
+                    "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all hover:bg-gray-400"
                   }
                 >
                   <ArrowIcon
+                    color={"black"}
                     pointing={
                       keepOpen
                         ? isRTL
@@ -454,7 +473,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
     
       {/* Children Container */}
       <div
-        className="fixed overflow-y-auto p-2"
+        className="fixed overflow-y-auto"
         style={
           isRTL
             ? {
@@ -492,22 +511,43 @@ const AvatarIcon = () => (
   </svg>
 )
 
-const ArrowIcon = ({ pointing }) => (
-  <svg
-    className={clsx(
-      "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
-      pointing === "right" ? "-rotate-90" : "rotate-90"
-    )}
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-      clipRule="evenodd"
-    ></path>
-  </svg>
-)
+const ArrowIcon = ({ pointing, color }) => {
+  let directionStyle
+  switch (pointing) {
+    case "right":
+      directionStyle = "-rotate-90"
+      break
+    case "left":
+      directionStyle = "rotate-90"
+      break
+    case "up":
+      directionStyle = "-rotate-180"
+      break
+    case "down":
+      directionStyle = "rotate-0"
+      break
+
+    default:
+      break
+  }
+  return (
+    <svg
+      className={clsx(
+        "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
+        directionStyle
+      )}
+      fill={color}
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  )
+}
 
 const SettingsIcon = () => (
   <svg

package/src/layout/HawaSiteLayout.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
-import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 
 type HawaSiteLayoutTypes = {
@@ -117,8 +116,22 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
               onClick={() => setOpenSideMenu(!openSideMenu)}
               className="cursor-pointer rounded p-1 transition-all hover:bg-gray-100"
             >
-              <HiMenu size={25} />
-            </div>
+ <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  height="1.6em"
+                  width="1.6em"
+                  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>            </div>
             {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
           </div>
         )}

package/src/layout/index.ts

@@ -6,3 +6,4 @@ export * from "./HawaAppLayoutSimplified"
 export * from "./HawaContainer"
 export * from "./AppSidebar"
 export * from "./Footer"
+export * from "./Banner"