@sikka/hawa 0.0.120 → 0.0.122

package/lib/layout/HawaAppLayout.d.ts

@@ -1,13 +1,16 @@
 import React from "react";
 type HawaAppLayoutTypes = {
-    logoLink: string;
     drawerItems: {
         label: string;
         icon: any;
         slug: string;
         action: () => void;
     }[];
-    currentPage?: string;
+    currentPage: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;
 export {};

package/package.json

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

package/src/elements/HawaStats.tsx

@@ -11,7 +11,7 @@ type StatTypes = {
   handleClick?: () => void
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
-  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm"
+  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
     contained: "bg-primary-200 w-fit",

package/src/layout/HawaAppLayout.tsx

@@ -2,27 +2,37 @@ import clsx from "clsx"
 import React, { useState } from "react"
 
 type HawaAppLayoutTypes = {
-  logoLink: string
   drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
-  currentPage?: string
+  currentPage: string
+  logoSymbol?: any
+  logoLink?: string
+  logoText?: any
+  children?: any
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
 ) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
-
   return (
     <div className="flex">
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
+        className="absolute top-0 left-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
       >
-        <div className="m-1 flex flex-row bg-red-300 p-2">
-          <div>symbol</div>
-          <div className={openSideMenu ? "scale-100" : "scale-0"}>
-            logo text
-          </div>
+        <div className="bg-red- m-1 flex flex-row p-2">
+          {/* full logo */}
+          {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"
+            />
+          ) : (
+            <img
+              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((dItem, i) => (
           <div
@@ -31,7 +41,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
             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",
               props.currentPage === dItem.slug
-                ? "bg-primary-600 text-white"
+                ? "bg-primary-600 text-white hover:bg-primary-600"
                 : ""
             )}
           >
@@ -48,7 +58,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         ))}
       </div>
 
-      <div className="w-full bg-red-200">{props.children}</div>
+      <div className=" absolute top-0 h-screen w-[calc(100%-3rem)] translate-x-8 overflow-scroll p-2">
+        {props.children}
+      </div>
     </div>
   )
 }

package/src/styles.css

@@ -838,6 +838,9 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-\[calc\(100\%-3rem\)\] {
+  width: calc(100% - 3rem);
+}
 .w-80 {
   width: 20rem;
 }
@@ -892,18 +895,12 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.rotate-180 {
-  --tw-rotate: 180deg;
+.translate-x-8 {
+  --tw-translate-x: 2rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.scale-0 {
-  --tw-scale-x: 0;
-  --tw-scale-y: 0;
+.rotate-180 {
+  --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .transform {
@@ -959,6 +956,9 @@ video {
 .items-stretch {
   align-items: stretch;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1035,6 +1035,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }