@sikka/hawa 0.0.183 → 0.0.184

package/lib/layout/HawaAppLayout.d.ts

@@ -17,6 +17,7 @@ type HawaAppLayoutTypes = {
     topBar?: boolean;
     username?: string;
     email?: string;
+    drawerSize?: "sm" | "md" | "large";
     profileMenuItems?: MenuItems[][];
 };
 type MenuItems = {

package/package.json

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

package/src/layout/HawaAppLayout.tsx

@@ -5,7 +5,8 @@ import { HawaMenu } from "../elements"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { FaChevronRight } from "react-icons/fa"
-
+// TODO: add ability to control the width of the drawer
+// TODO: when no navbar, the drawer can't be opened
 type HawaAppLayoutTypes = {
   drawerItems: {
     label: string
@@ -24,6 +25,7 @@ type HawaAppLayoutTypes = {
   topBar?: boolean
   username?: string
   email?: string
+  drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItems[][]
 }
 
@@ -38,6 +40,7 @@ type MenuItems = {
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   direction = "rtl",
+  drawerSize = "lg",
   ...props
 }) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
@@ -66,31 +69,29 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
 
   let drawerDefaultStyle =
     "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all"
-  let ltrDrawerStyle = "left-0"
-  let rtlDrawerStyle = "right-0"
 
-  let ltrChildrenStyle = [
-    "fixed  overflow-y-auto",
-    size > 600 ? "left-14 w-[calc(100%-3.5rem)]" : "left-0 ",
-    props.topBar ? "top-14 h-[calc(100%-3.5rem)]" : "top-0 h-full",
-    keepOpen ? "left-40 w-[calc(100%-10rem)]" : "",
-    keepOpen && size > 600 ? "left-0 w-[calc(100%-10.01rem)]" : "w-full",
-  ]
-  let rtlChildrenStyle = [
-    "fixed overflow-y-auto",
-    size > 600 ? "right-14 w-[calc(100%-3.5rem)]" : "right-0 ",
-    props.topBar ? "top-14 h-[calc(100%-3.5rem)]" : "top-0 h-full",
-    keepOpen ? "right-40 w-[calc(100%-10rem)]" : "",
-    keepOpen && size > 600 ? "right-0 w-[calc(100%-10.01rem)]" : "w-full",
-  ]
+  let drawerSizeStyle = {
+    opened: {
+      sm: "100",
+      md: "160",
+      lg: "250",
+    },
+    closed: {
+      sm: "56",
+      md: "56",
+      lg: "56",
+    },
+  }
+  let drawerSizeCondition =
+    size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0
   return (
-    <div className="fixed left-0 h-full">
+    <div className="absolute left-0 right-0 h-full w-full">
       {/* Top Bar Component */}
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-30 flex h-14 w-full flex-row items-center justify-between bg-layoutPrimary-500 p-2",
-            isRTL ? "flex-row-reverse" : ""
+            "fixed top-0 z-30 flex h-14 w-full items-center justify-between bg-layoutPrimary-500 p-2",
+            isRTL ? "flex-row-reverse" : "flex-row"
           )}
         >
           {/* Nav Side Of Navbar */}
@@ -115,7 +116,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
             >
               <div
                 onClick={() => setOpenSideMenu(true)}
-                className=" mr-2 cursor-pointer rounded p-2  transition-all hover:bg-gray-100"
+                className="mr-2 cursor-pointer rounded p-2  transition-all hover:bg-gray-100"
               >
                 <HiMenu size={25} />
               </div>
@@ -173,17 +174,17 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
         ref={ref}
         className={clsx(
           drawerDefaultStyle,
-          isRTL ? rtlDrawerStyle : ltrDrawerStyle
+          drawerSizeStyle[drawerSize],
+          isRTL ? "right-0" : "left-0"
         )}
         style={{
-          // width:"160px",
           width:
             size > 600
               ? openSideMenu
-                ? "160px"
-                : "56px"
+                ? `${drawerSizeStyle["opened"][drawerSize]}px`
+                : `${drawerSizeStyle["closed"][drawerSize]}px`
               : openSideMenu
-              ? "160px"
+              ? `${drawerSizeStyle["opened"][drawerSize]}px`
               : "0px",
         }}
       >
@@ -197,7 +198,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           {/* Logo Container */}
           <div
             className={clsx(
-              "fixed z-50 mb-2 flex h-14 items-center justify-center bg-layoutPrimary-500 p-2 transition-all",
+              "fixed z-50 mb-2 flex h-14 items-center justify-center bg-transparent p-2 transition-all",
               openSideMenu ? "w-40" : "w-14"
             )}
           >
@@ -215,7 +216,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
             {size > 600 ? (
               <img
                 className={clsx(
-                  // " bg-green-500",
                   "fixed top-2.5 h-9 transition-all",
                   isRTL ? "right-2.5" : "left-2.5",
                   openSideMenu ? "invisible opacity-0" : "visible opacity-100"
@@ -329,8 +329,8 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           <div
             dir={direction}
             className={clsx(
-              "fixed top-4 z-50 flex w-fit items-center",
-              isRTL ? "right-32 justify-start" : "left-32 justify-start",
+              "fixed top-4   z-50 flex w-fit items-center",
+              isRTL ? "right-0 justify-start" : "left-32 justify-start",
               "transition-all duration-700",
               openSideMenu && size > 600 ? " opacity-100" : " opacity-0"
             )}
@@ -357,10 +357,26 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           </div>
         ) : null}
       </div>
-
+      {/* 
+    
       {/* Children Container */}
-      <div className={clsx(isRTL ? rtlChildrenStyle : ltrChildrenStyle)}>
-        {props.children}
+      <div
+        className="fixed overflow-y-auto"
+        style={
+          isRTL
+            ? {
+                width: `calc(100% - ${drawerSizeCondition}px)`,
+                top: props.topBar ? "56px" : "0px",
+              }
+            : {
+                width: `calc(100% - ${drawerSizeCondition}px)`,
+                left: `${drawerSizeCondition}px`,
+                top: props.topBar ? "56px" : "0px",
+              }
+        }
+        // className={clsx(isRTL ? rtlChildrenStyle : ltrChildrenStyle)}
+      >
+        <div className="rounded">{props.children}</div>{" "}
       </div>
     </div>
   )

package/src/styles.css

@@ -623,21 +623,6 @@ video {
 .left-8 {
   left: 2rem;
 }
-.left-14 {
-  left: 3.5rem;
-}
-.top-14 {
-  top: 3.5rem;
-}
-.left-40 {
-  left: 10rem;
-}
-.right-14 {
-  right: 3.5rem;
-}
-.right-40 {
-  right: 10rem;
-}
 .-left-1 {
   left: -0.25rem;
 }
@@ -653,15 +638,15 @@ video {
 .left-2 {
   left: 0.5rem;
 }
-.right-32 {
-  right: 8rem;
-}
 .left-32 {
   left: 8rem;
 }
 .top-auto {
   top: auto;
 }
+.top-14 {
+  top: 3.5rem;
+}
 .z-50 {
   z-index: 50;
 }
@@ -689,9 +674,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.m-4 {
-  margin: 1rem;
-}
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -893,15 +875,15 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-\[calc\(100\%-3\.5rem\)\] {
-  height: calc(100% - 3.5rem);
-}
 .h-9 {
   height: 2.25rem;
 }
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[calc\(100\%-3\.5rem\)\] {
+  height: calc(100% - 3.5rem);
+}
 .h-44 {
   height: 11rem;
 }
@@ -973,15 +955,6 @@ video {
 .w-2\/3 {
   width: 66.666667%;
 }
-.w-\[calc\(100\%-3\.5rem\)\] {
-  width: calc(100% - 3.5rem);
-}
-.w-\[calc\(100\%-10rem\)\] {
-  width: calc(100% - 10rem);
-}
-.w-\[calc\(100\%-10\.01rem\)\] {
-  width: calc(100% - 10.01rem);
-}
 .w-40 {
   width: 10rem;
 }
@@ -1500,10 +1473,6 @@ 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-layoutPrimary-300 {
   background-color: var(--layout-primary-300);
 }