@sikka/hawa 0.0.134 → 0.0.135

package/package.json

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

package/src/layout/HawaAppLayout.tsx

@@ -42,7 +42,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
           )}
         >
           {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
-          {/* <div>currentPage</div> */}
           <HawaMenu
             buttonPosition="top-right"
             menuItems={props.profileMenuItems}
@@ -70,7 +69,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="fixed top-0 left-0 z-50 flex h-full w-12 flex-col bg-primary-400 transition-all hover:w-40"
+        className="fixed top-0 left-0 z-50 flex h-full w-12 flex-col overflow-auto bg-primary-400 transition-all hover:w-40"
       >
         <div className="flex flex-row p-2">
           {/* full logo */}
@@ -86,26 +85,37 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
             />
           )}
         </div>
-        {props.drawerItems.map((dItem, i) => (
-          <div
-            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-500",
-              props.currentPage === dItem.slug
-                ? "bg-primary-600 text-white hover:bg-primary-600"
-                : ""
-            )}
-          >
-            <div className="flex items-center justify-center">{dItem.icon}</div>
-            <div
-              className={clsx(
-                "mx-2 whitespace-nowrap text-sm transition-all",
-                openSideMenu ? "opacity-100" : "opacity-0"
-              )}
-            >
-              {dItem.label}
-            </div>
+        {props.drawerItems.map((dSection, j) => (
+          <div className="flex flex-col items-stretch justify-center">
+            {dSection.map((dItem, i) => {
+              return (
+                <div
+                  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-500",
+                    props.currentPage === dItem.slug
+                      ? "bg-primary-600 text-white hover:bg-primary-600"
+                      : ""
+                  )}
+                >
+                  <div className="flex items-center justify-center">
+                    {dItem.icon}
+                  </div>
+                  <div
+                    className={clsx(
+                      "mx-2 whitespace-nowrap text-sm transition-all",
+                      openSideMenu ? "opacity-100" : "opacity-0"
+                    )}
+                  >
+                    {dItem.label}
+                  </div>
+                </div>
+              )
+            })}
+            {j !== props.drawerItems.length - 1 && (
+              <div className="my-2 h-[1px] w-10/12 self-center bg-primary-600 text-center "></div>
+            )}{" "}
           </div>
         ))}
       </div>

package/src/styles.css

@@ -767,6 +767,9 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-9 {
   height: 2.25rem;
 }
@@ -844,6 +847,9 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-10\/12 {
+  width: 83.333333%;
+}
 .w-\[calc\(100\%-1rem\)\] {
   width: calc(100% - 1rem);
 }
@@ -1040,9 +1046,15 @@ video {
   --tw-divide-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-divide-opacity));
 }
+.self-center {
+  align-self: center;
+}
 .justify-self-end {
   justify-self: end;
 }
+.overflow-auto {
+  overflow: auto;
+}
 .overflow-hidden {
   overflow: hidden;
 }

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="669.d0879212.iframe.bundle.js"></script><script src="main.b801e3dc.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="669.d0879212.iframe.bundle.js"></script><script src="main.2d33731c.iframe.bundle.js"></script></body></html>