@sikka/hawa 0.0.131 → 0.0.133

package/lib/layout/HawaAppLayout.d.ts

@@ -7,10 +7,19 @@ type HawaAppLayoutTypes = {
         action: () => void;
     }[];
     currentPage: string;
+    pageTitle?: string;
     logoSymbol?: any;
     logoLink?: string;
     logoText?: any;
     children?: any;
+    topBar?: boolean;
+    profileMenuItems?: MenuItems[][];
+};
+type MenuItems = {
+    icon?: JSX.Element;
+    label: string;
+    action?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, item: string) => void;
+    isButton?: boolean;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;
 export {};

package/package.json

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

package/src/elements/HawaMenu.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { ReactNode } from "react"
+import React, { ReactNode, useEffect, useRef } from "react"
 
 interface TMenuTypes {
   menuItems: MenuItems[][]
@@ -13,6 +13,7 @@ interface TMenuTypes {
   anchor?: any
   children?: ReactNode
   buttonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
+  onClickOutside?: any
 }
 
 type MenuItems = {
@@ -36,7 +37,22 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   handleOpen,
   buttonPosition,
   children,
+  onClickOutside,
 }) => {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        // onClickOutside && onClickOutside()
+        handleClose()
+      }
+    }
+    document.addEventListener("click", handleClickOutside, true)
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true)
+    }
+  }, [onClickOutside])
   let defaultStyles =
     "border-none ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
   let positionStyles = {
@@ -60,6 +76,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
       {children}
 
       <div
+        ref={ref}
         className={clsx(
           defaultStyles,
           positionStyles[buttonPosition],
@@ -82,7 +99,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     className={
                       item.isButton
                         ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
-                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >
                     {withIcons && (

package/src/layout/HawaAppLayout.tsx

@@ -1,24 +1,77 @@
 import clsx from "clsx"
 import React, { useState } from "react"
+import useDiscloser from "../hooks/useDiscloser"
+import { HawaMenu } from "../elements"
 
 type HawaAppLayoutTypes = {
   drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
   currentPage: string
+  pageTitle?: string
   logoSymbol?: any
   logoLink?: string
   logoText?: any
   children?: any
+  topBar?: boolean
+  profileMenuItems?: MenuItems[][]
+}
+type MenuItems = {
+  icon?: JSX.Element
+  label: string
+  action?: (
+    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    item: string
+  ) => void
+  isButton?: boolean
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
 ) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
+  const { isOpen, onClose, onOpen } = useDiscloser(false)
+
   return (
     <>
+      {props.topBar && (
+        <div
+          className={clsx(
+            "fixed top-0 z-40 flex h-14 w-1/2 flex-row items-center justify-between bg-primary-400",
+            "w-[calc(100%-3rem)]",
+            "translate-x-[3rem]",
+            "p-2"
+            ,
+            'pr-5'
+          )}
+        >
+          {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
+          {/* <div>currentPage</div> */}
+          <HawaMenu
+            buttonPosition="top-right"
+            menuItems={props.profileMenuItems}
+            handleClose={onClose}
+            handleOpen={onOpen}
+            open={isOpen}
+          >
+            <div className="relative cursor-pointer h-8 w-8 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
+              <svg
+                className="absolute -left-1 h-10 w-10 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>
+          </HawaMenu>
+        </div>
+      )}
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="fixed top-0 left-0 z-50 flex h-full w-12 flex-col bg-blue-300 transition-all hover:w-40"
+        className="fixed top-0 left-0 z-50 flex h-full w-12 flex-col bg-primary-400 transition-all hover:w-40"
       >
         <div className="flex flex-row p-2">
           {/* full logo */}
@@ -39,7 +92,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
             key={i}
             onClick={() => dItem.action(dItem.slug)}
             className={clsx(
-              "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-primary-400",
+              "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-primary-500",
               props.currentPage === dItem.slug
                 ? "bg-primary-600 text-white hover:bg-primary-600"
                 : ""
@@ -63,7 +116,8 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
           "w-[calc(100%-3rem)]",
           "translate-x-[3rem]",
           "bg-red-900 text-white",
-          "m-0"
+          "m-0",
+          props.topBar ? "mt-14" : ""
         )}
       >
         {props.children}

package/src/styles.css

@@ -553,6 +553,9 @@ video {
 .top-5 {
   top: 1.25rem;
 }
+.-left-1 {
+  left: -0.25rem;
+}
 .top-auto {
   top: auto;
 }
@@ -565,9 +568,6 @@ video {
 .top-2 {
   top: 0.5rem;
 }
-.-left-1 {
-  left: -0.25rem;
-}
 .z-10 {
   z-index: 10;
 }
@@ -673,6 +673,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.mt-14 {
+  margin-top: 3.5rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -835,12 +838,12 @@ video {
 .w-2\/3 {
   width: 66.666667%;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-\[calc\(100\%-3rem\)\] {
   width: calc(100% - 3rem);
 }
+.w-12 {
+  width: 3rem;
+}
 .w-\[calc\(100\%-1rem\)\] {
   width: calc(100% - 1rem);
 }
@@ -1488,6 +1491,9 @@ video {
 .pl-10 {
   padding-left: 2.5rem;
 }
+.pr-5 {
+  padding-right: 1.25rem;
+}
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1853,9 +1859,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
-.hover\:bg-primary-400:hover {
+.hover\:bg-primary-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(116 177 251 / var(--tw-bg-opacity));
+  background-color: rgb(61 147 249 / var(--tw-bg-opacity));
 }
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;