@sikka/hawa 0.0.149 → 0.0.151

package/package.json

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

package/src/layout/HawaAppLayout.tsx

@@ -91,7 +91,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
             <div className="flex items-center justify-center">
               <div
                 onClick={() => setOpenSideMenu(true)}
-                className=" cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
+                className=" mr-2 cursor-pointer rounded-lg p-2  transition-all hover:bg-gray-100"
               >
                 <HiMenu size={25} />
               </div>
@@ -214,7 +214,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
           ))}
         </div>
         <div className={clsx("flex items-center justify-end")}>
-          {openSideMenu && !keepOpen ? (
+          {openSideMenu && !keepOpen && size > 600 ? (
             <div
               onClick={() => setKeepOpen(true)}
               className="m-2 w-fit cursor-pointer rounded-lg bg-gray-300 p-2"
@@ -235,19 +235,15 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
 
       <div
         className={clsx(
+          "fixed h-full overflow-y-auto",
           size > 600 ? "left-14" : "left-0",
-          // size > 600 ? "w-[calc(100%-3rem)] translate-x-[3.54rem]" : "",
-          "fixed h-full w-full overflow-y-auto",
           props.topBar ? "top-14" : "top-0",
-          // props.topBar ? "mt-[3.6rem]" : "mt-0",
-          // keepOpen ? "w-[calc(100%-10rem)] translate-x-[10.54rem]" : ""
-          keepOpen ? "left-40" : "left-0"
+          keepOpen ? "left-40 w-[calc(100%-10rem)]" : "",
+          keepOpen && size > 600 ? "left-0 w-[calc(100%-3.5rem)]" : ""
         )}
-        // className={"layoutBody_open"}
       >
         {props.children}
       </div>
-      {/* <div className="top-0 w-[calc(100%-1rem)] -translate-y-[1rem] translate-x-8 overflow-scroll bg-yellow-300 "> */}
     </div>
   )
 }

package/src/styles.css

@@ -692,9 +692,6 @@ video {
 .mb-9 {
   margin-bottom: 2.25rem;
 }
-.mt-\[3\.6rem\] {
-  margin-top: 3.6rem;
-}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -878,8 +875,8 @@ video {
 .w-\[calc\(100\%-10rem\)\] {
   width: calc(100% - 10rem);
 }
-.w-\[calc\(100\%-1rem\)\] {
-  width: calc(100% - 1rem);
+.w-\[calc\(100\%-3\.5rem\)\] {
+  width: calc(100% - 3.5rem);
 }
 .w-80 {
   width: 20rem;
@@ -936,22 +933,6 @@ video {
   --tw-translate-x: 3rem;
   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));
 }
-.translate-x-\[3\.54rem\] {
-  --tw-translate-x: 3.54rem;
-  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));
-}
-.translate-x-\[10\.54rem\] {
-  --tw-translate-x: 10.54rem;
-  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));
-}
-.-translate-y-\[1rem\] {
-  --tw-translate-y: -1rem;
-  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));
-}
-.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));
-}
 .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));
@@ -1086,9 +1067,6 @@ video {
 .overflow-clip {
   overflow: clip;
 }
-.overflow-scroll {
-  overflow: scroll;
-}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1402,10 +1380,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }