@sikka/hawa 0.0.118 → 0.0.120

package/lib/layout/AppSidebar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    items: {
+        label: string;
+        onClick: () => void;
+    }[];
+}
+export declare const AppSidebar: React.FC<Props>;
+export {};

package/lib/layout/HawaAppLayout.d.ts

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

package/lib/layout/index.d.ts

@@ -4,3 +4,4 @@ export * from "./HawaSiteLayout";
 export * from "./HawaAppLayout";
 export * from "./HawaContainer";
 export * from "./SimpleGrid";
+export * from "./AppSidebar";

package/package.json

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

package/src/layout/AppSidebar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  items: { label: string; onClick: () => void }[]
+}
+
+export const AppSidebar: React.FC<Props> = ({ isOpen, onClose, items }) => {
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div className="fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75">
+      <div className="w-1/3 rounded-l-lg bg-gray-800 shadow-2xl">
+        <button
+          onClick={onClose}
+          className="p-4 text-gray-400 hover:text-white focus:text-white focus:outline-none"
+        >
+          Close
+        </button>
+        <nav>
+          {items.map((item) => (
+            <a
+              href="#"
+              onClick={item.onClick}
+              className="block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+      <div className="w-2/3 bg-gray-50"></div>
+    </div>
+  )
+}

package/src/layout/HawaAppLayout.tsx

@@ -3,9 +3,8 @@ import React, { useState } from "react"
 
 type HawaAppLayoutTypes = {
   logoLink: string
-  username: string
-  userEmail: string
-  drawerItems: any
+  drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
+  currentPage?: string
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
@@ -13,15 +12,29 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   const [openSideMenu, setOpenSideMenu] = useState(false)
 
   return (
-    <div className="fixed top-0 left-0 m-0 w-full p-0">
+    <div className="flex">
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="absolute top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
+        className="top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
       >
-        <div className="m-1 bg-red-300 p-2">logo</div>
-        {props.drawerItems.map((dItem) => (
-          <div className="pl-3 m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg bg-orange-400 p-2 transition-all hover:bg-green-300">
+        <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>
+        {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-400",
+              props.currentPage === dItem.slug
+                ? "bg-primary-600 text-white"
+                : ""
+            )}
+          >
             <div className="flex items-center justify-center">{dItem.icon}</div>
             <div
               className={clsx(
@@ -29,41 +42,13 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                 openSideMenu ? "opacity-100" : "opacity-0"
               )}
             >
-              {dItem.text}
+              {dItem.label}
             </div>
           </div>
         ))}
       </div>
 
-      {/* 
-      <div className="relative flex flex-row bg-yellow-300">
-        <div className="relative left-10 h-screen w-full bg-orange-300">
-          <div className="m-0 flex flex-row justify-between bg-red-300 p-2">
-            <div></div>
-            <div>page title</div>
-            <div className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
-              <AvatarIcon />
-            </div>
-          </div>
-
-          <div>{props.children}</div>
-        </div>
-      </div> */}
+      <div className="w-full bg-red-200">{props.children}</div>
     </div>
   )
 }
-
-const AvatarIcon = () => (
-  <svg
-    className="absolute -left-1 h-12 w-12 text-gray-400"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-      clip-rule="evenodd"
-    ></path>
-  </svg>
-)

package/src/layout/index.ts

@@ -4,3 +4,4 @@ export * from "./HawaSiteLayout"
 export * from "./HawaAppLayout"
 export * from "./HawaContainer"
 export * from "./SimpleGrid"
+export * from "./AppSidebar"

package/src/styles.css

@@ -508,6 +508,12 @@ video {
 .relative {
   position: relative;
 }
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
 .left-0 {
   left: 0px;
 }
@@ -547,12 +553,6 @@ video {
 .top-5 {
   top: 1.25rem;
 }
-.left-10 {
-  left: 2.5rem;
-}
-.-left-1 {
-  left: -0.25rem;
-}
 .top-auto {
   top: auto;
 }
@@ -565,6 +565,9 @@ video {
 .top-2 {
   top: 0.5rem;
 }
+.-left-1 {
+  left: -0.25rem;
+}
 .z-10 {
   z-index: 10;
 }
@@ -583,12 +586,12 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
-.m-0 {
-  margin: 0px;
-}
 .m-1 {
   margin: 0.25rem;
 }
+.m-0 {
+  margin: 0px;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -761,12 +764,12 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-9 {
   height: 2.25rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -826,12 +829,15 @@ video {
 .w-1 {
   width: 0.25rem;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-1\/3 {
   width: 33.333333%;
 }
+.w-2\/3 {
+  width: 66.666667%;
+}
+.w-12 {
+  width: 3rem;
+}
 .w-80 {
   width: 20rem;
 }
@@ -890,6 +896,16 @@ video {
   --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));
 }
+.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;
+  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 {
   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));
 }
@@ -1312,22 +1328,25 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
-.bg-orange-400 {
+.bg-gray-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
-.bg-yellow-300 {
+.bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-orange-300 {
+.bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
 }
 .bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 199 252 / var(--tw-bg-opacity));
 }
+.bg-opacity-75 {
+  --tw-bg-opacity: 0.75;
+}
 .bg-\[url\(\'https\:\/\/via\.placeholder\.com\/50\'\)\] {
   background-image: url('https://via.placeholder.com/50');
 }
@@ -1650,6 +1669,11 @@ video {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1806,9 +1830,13 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
-.hover\:bg-green-300:hover {
+.hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+.hover\:bg-primary-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
@@ -1822,6 +1850,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
+.hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1838,6 +1870,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;