@sikka/hawa 0.0.140 → 0.0.142

package/package.json

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

package/src/hooks/useBreakpoint.ts

@@ -1,16 +1,21 @@
 import { useState, useEffect } from "react"
 
 const useBreakpoint = () => {
+  console.log("window is ")
   const [breakpoint, setBreakpoint] = useState(window?.innerWidth)
   const resize = () => {
     setBreakpoint(window?.innerWidth)
   }
 
   useEffect(() => {
-    window?.addEventListener("resize", resize)
-
-    return () => {
-      window?.removeEventListener("resize", resize)
+    if (typeof window !== "undefined") {
+      // Client-side-only code
+      
+      window?.addEventListener("resize", resize)
+  
+      return () => {
+        window?.removeEventListener("resize", resize)
+      }
     }
   }, [])
 

package/src/layout/HawaAppLayout.tsx

@@ -31,7 +31,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   const { isOpen, onClose, onOpen } = useDiscloser(false)
   const ref = useRef(null)
 
-  const size = useBreakpoint()
+  let size
+  if (typeof window !== "undefined") {
+    size = useBreakpoint()
+  } else {
+    size = 1200
+  }
   console.log("size is ", size)
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -95,13 +100,33 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         onMouseLeave={() => setOpenSideMenu(false)}
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-auto bg-primary-400 transition-all hover:w-40",
+          "fixed top-0 left-0 z-50 flex h-full flex-col bg-primary-400 transition-all hover:w-40 hover:overflow-auto",
           size > 600 ? "w-12" : "w-0",
           openSideMenu ? "w-40" : ""
         )}
       >
-        <div className="flex flex-row items-center justify-center bg-red-300 p-2">
-          {openSideMenu ? (
+        <div className="  mb-9 h-12        w-12 p-2">
+          <img
+            className={clsx(
+              "fixed top-2 h-9",
+              !openSideMenu ? "invisible" : "visible"
+            )}
+            height={10}
+            src={props.logoLink}
+            // src={"https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"}
+          />
+
+          <img
+            className={clsx(
+              // " bg-green-500",
+              "fixed top-2 h-9",
+              openSideMenu ? "invisible" : "visible"
+            )}
+            src={props.logoSymbol}
+            // src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
+          />
+
+          {/* {openSideMenu ? (
             <img
               className={clsx("h-10", !openSideMenu ? "invisible" : "visible")}
               src="https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
@@ -111,7 +136,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
               className={clsx("h-10", openSideMenu ? "invisible" : "visible")}
               src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
             />
-          )}
+          )} */}
         </div>
 
         {props.drawerItems.map((dSection, j) => (

package/src/styles.css

@@ -556,6 +556,9 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-auto {
   top: auto;
 }
@@ -565,9 +568,6 @@ video {
 .right-2\.5 {
   right: 0.625rem;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .z-10 {
   z-index: 10;
 }
@@ -670,6 +670,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -767,14 +770,14 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-\[1px\] {
-  height: 1px;
+.h-12 {
+  height: 3rem;
 }
 .h-9 {
   height: 2.25rem;
 }
-.h-12 {
-  height: 3rem;
+.h-\[1px\] {
+  height: 1px;
 }
 .h-20 {
   height: 5rem;
@@ -1056,9 +1059,6 @@ video {
 .justify-self-end {
   justify-self: end;
 }
-.overflow-auto {
-  overflow: auto;
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1366,6 +1366,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
 .bg-primary-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(6 92 198 / var(--tw-bg-opacity));
@@ -1819,6 +1823,9 @@ body {
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
+.hover\:overflow-auto:hover {
+  overflow: auto;
+}
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));