@sikka/hawa 0.1.14 → 0.1.16

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { HawaMenu } from "../elements"
+import { Button, DropdownMenu, HawaMenu, Tooltip } from "../elements"
 
 type HawaAppLayoutTypes = {
   /** The pages of the side drawer */
@@ -26,17 +26,32 @@ type HawaAppLayoutTypes = {
   username?: string
   email?: string
   drawerSize?: "sm" | "md" | "large"
-  profileMenuItems?: MenuItems[][]
+  profileMenuItems?: Item[]
   onSettingsClick?: () => void
-  DrawerFooterActions: any
+  DrawerFooterActions?: any
+  texts?: {
+    expandSidebar?: string
+    collapseSidebar?: string
+  }
+}
+type SubItem = {
+  label: string
+  value: string
+  highlighted?: boolean
 }
 
-type MenuItems = {
-  icon?: JSX.Element
+type Item = {
   label: string
-  action?: (e: any) => void
-  isButton?: boolean
+  value: string
+  highlighted?: boolean
+  subitems?: SubItem[] // Note the use of the optional modifier
 }
+// type MenuItems = {
+//   icon?: JSX.Element
+//   label: string
+//   action?: (e: any) => void
+//   isButton?: boolean
+// }
 export const HawaAppLayoutSimplified: React.FunctionComponent<
   HawaAppLayoutTypes
 > = ({
@@ -179,26 +194,33 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 <div>{props.email}</div>
               </div>
             ) : null}
-
             {/* Profile Icon & Menu */}
-            <HawaMenu
+            {/* <HawaMenu
               direction={direction}
-              // buttonPosition={isRTL ? "top-left" : "top-right"}
               withHeader={size > 600 ? false : true}
               headerTitle={size > 600 ? "" : props.username}
               headerSubtitle={size > 600 ? "" : props.email}
               menuItems={props.profileMenuItems}
-              // handleClose={onClose}
-              // handleOpen={onOpen}
-              // open={isOpen}
               position={"bottom-left"}
-              // position={isRTL ? "bottom-left" : "bottom-left"}
-              // position={isRTL ? "right-bottom" : "bottom-left"}
             >
               <div className="relative mx-2 h-8 w-8  cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600">
                 <AvatarIcon />
               </div>
-            </HawaMenu>
+            </HawaMenu> */}
+            <DropdownMenu
+              align="end"
+              alignOffset={10}
+              side={"bottom"}
+              sideOffset={10}
+              direction={isRTL ? "rtl" : "ltr"}
+              trigger={
+                <div className="relative mx-2 h-8 w-8  cursor-pointer overflow-hidden rounded ring-1 ring-primary dark:bg-gray-600">
+                  <AvatarIcon />
+                </div>
+              }
+              items={props.profileMenuItems}
+              onItemSelect={(e) => console.log("selecting item ", e)}
+            />{" "}
           </div>
         </div>
       )}
@@ -311,8 +333,8 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           dItem.subItems?.find(
                             (e) => e.slug === props.currentPage
                           )
-                          ? "bg-buttonPrimary-500 text-white"
-                          : "hover:bg-layoutPrimary-300",
+                          ? "bg-primary text-white"
+                          : "hover:bg-primary/20",
                         "my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
                         isRTL ? "flex-row-reverse pr-3" : "",
                         openSideMenu ? "m-2" : "m-2"
@@ -353,7 +375,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                     {dItem.subItems && (
                       <div
                         className={clsx(
-                          "m-1 mx-2 flex cursor-pointer flex-col gap-[2px] overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
+                          "m-1 mx-2 flex cursor-pointer flex-col gap-[2px] overflow-clip whitespace-nowrap rounded bg-primary/10 p-1 transition-all",
                           openSubItem == dItem.slug && openSideMenu
                             ? ""
                             : "my-0 py-0",
@@ -373,8 +395,8 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                               "flex flex-row gap-2 overflow-x-clip  rounded-inner p-2 px-2 text-xs",
                               isRTL ? "text-right" : "text-left",
                               props.currentPage === subIt.slug
-                                ? "bg-buttonPrimary-500 text-white hover:bg-primary-foreground"
-                                : "hover:bg-layoutPrimary-500 dark:text-white"
+                                ? "bg-primary text-white"
+                                : "hover:bg-primary-foreground hover:text-primary "
                             )}
                             dir={direction}
                             onClick={() => {
@@ -448,25 +470,35 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                   openSideMenu ? " opacity-100" : " opacity-0"
                 )}
               >
-                <div
-                  onClick={() => setKeepOpen(!keepOpen)}
-                  className={
-                    "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all hover:bg-gray-400 bg-layoutPrimary-600 dark:hover:bg-layoutPrimary-700"
+                <Tooltip
+                  side={"left"}
+                  delayDuration={300}
+                  content={
+                    keepOpen
+                      ? props.texts?.collapseSidebar || "Collapse Sidebar"
+                      : props.texts?.expandSidebar || "Expand Sidebar"
+                    //  || "Expand Sidebar"
                   }
                 >
-                  <ArrowIcon
-                    // color={"black"}
-                    pointing={
-                      keepOpen
-                        ? isRTL
-                          ? "right"
-                          : "left"
-                        : isRTL
-                        ? "left"
-                        : "right"
-                    }
-                  />
-                </div>
+                  <Button
+                    variant="secondary"
+                    onClick={() => setKeepOpen(!keepOpen)}
+                    size="icon"
+                  >
+                    <ArrowIcon
+                      // color={"black"}
+                      pointing={
+                        keepOpen
+                          ? isRTL
+                            ? "right"
+                            : "left"
+                          : isRTL
+                          ? "left"
+                          : "right"
+                      }
+                    />
+                  </Button>
+                </Tooltip>
               </div>
             </div>
           ) : null}

package/src/styles.css

@@ -828,6 +828,10 @@ video {
 .m-\[5px\] {
   margin: 5px;
 }
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1039,6 +1043,9 @@ video {
 .h-3 {
   height: 0.75rem;
 }
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -1093,6 +1100,9 @@ video {
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
+.h-\[var\(--radix-select-trigger-height\)\] {
+  height: var(--radix-select-trigger-height);
+}
 .h-auto {
   height: auto;
 }
@@ -1107,6 +1117,9 @@ video {
   height: -moz-min-content;
   height: min-content;
 }
+.h-px {
+  height: 1px;
+}
 .h-screen {
   height: 100vh;
 }
@@ -1126,6 +1139,9 @@ video {
 .min-h-\[37\.75px\] {
   min-height: 37.75px;
 }
+.min-h-\[80px\] {
+  min-height: 80px;
+}
 .w-0 {
   width: 0px;
 }
@@ -1171,6 +1187,9 @@ video {
 .w-3 {
   width: 0.75rem;
 }
+.w-3\.5 {
+  width: 0.875rem;
+}
 .w-3\/4 {
   width: 75%;
 }
@@ -1263,6 +1282,12 @@ video {
 .min-w-\[32px\] {
   min-width: 32px;
 }
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
+.min-w-\[var\(--radix-select-trigger-width\)\] {
+  min-width: var(--radix-select-trigger-width);
+}
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -1636,6 +1661,9 @@ video {
 .rounded-none {
   border-radius: 0px;
 }
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
 .rounded-xl {
   border-radius: calc(var(--radius) + 4px);
 }
@@ -1923,9 +1951,6 @@ video {
 .bg-layoutPrimary-500 {
   background-color: var(--layout-primary-500);
 }
-.bg-layoutPrimary-600 {
-  background-color: var(--layout-primary-600);
-}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1942,6 +1967,9 @@ video {
 .bg-primary-foreground {
   background-color: hsl(var(--primary-foreground));
 }
+.bg-primary\/10 {
+  background-color: hsl(var(--primary) / 0.1);
+}
 .bg-primary\/20 {
   background-color: hsl(var(--primary) / 0.2);
 }
@@ -2015,6 +2043,9 @@ video {
 .bg-none {
   background-image: none;
 }
+.fill-current {
+  fill: currentColor;
+}
 .fill-primary {
   fill: hsl(var(--primary));
 }
@@ -2172,6 +2203,9 @@ video {
 .pl-6 {
   padding-left: 1.5rem;
 }
+.pl-8 {
+  padding-left: 2rem;
+}
 .pl-\[20px\] {
   padding-left: 20px;
 }
@@ -2322,6 +2356,9 @@ video {
 .tracking-tight {
   letter-spacing: -0.025em;
 }
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2473,6 +2510,9 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
+.opacity-60 {
+  opacity: 0.6;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2544,6 +2584,9 @@ video {
 .ring-buttonPrimary-500 {
   --tw-ring-color: hsl(var(--button-primary-500));
 }
+.ring-primary {
+  --tw-ring-color: hsl(var(--primary));
+}
 .ring-primary\/20 {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
@@ -2911,6 +2954,9 @@ body {
 .hover\:bg-primary\/10:hover {
   background-color: hsl(var(--primary) / 0.1);
 }
+.hover\:bg-primary\/20:hover {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -3000,6 +3046,12 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
+.focus\:bg-accent:focus {
+  background-color: hsl(var(--accent));
+}
+.focus\:text-accent-foreground:focus {
+  color: hsl(var(--accent-foreground));
+}
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3008,6 +3060,11 @@ body {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring-0:focus {
+  --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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .focus\:ring-2:focus {
   --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3034,6 +3091,12 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
 }
+.focus\:ring-ring:focus {
+  --tw-ring-color: hsl(var(--ring));
+}
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3108,6 +3171,22 @@ body {
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
+.data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
+  --tw-translate-y: 0.25rem;
+  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));
+}
+.data-\[side\=left\]\:-translate-x-1[data-side=left] {
+  --tw-translate-x: -0.25rem;
+  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));
+}
+.data-\[side\=right\]\:translate-x-1[data-side=right] {
+  --tw-translate-x: 0.25rem;
+  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));
+}
+.data-\[side\=top\]\:-translate-y-1[data-side=top] {
+  --tw-translate-y: -0.25rem;
+  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));
+}
 @keyframes slideUpAndFade {
 
   from {
@@ -3176,6 +3255,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
 }
+.data-\[state\=open\]\:bg-accent[data-state=open] {
+  background-color: hsl(var(--accent));
+}
 .data-\[state\=open\]\:bg-violet-4[data-state=open] {
   --tw-bg-opacity: 1;
   background-color: hsl(252 91.5% 95.5% / var(--tw-bg-opacity));
@@ -3196,6 +3278,18 @@ body {
   --tw-text-opacity: 1;
   color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
 }
+.data-\[disabled\]\:opacity-50[data-disabled] {
+  opacity: 0.5;
+}
+.data-\[state\=open\]\:animate-in[data-state=open] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
 .data-\[state\=closed\]\:animate-out[data-state=closed] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -3208,9 +3302,15 @@ body {
 .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
   --tw-exit-opacity: 0;
 }
+.data-\[state\=open\]\:fade-in-0[data-state=open] {
+  --tw-enter-opacity: 0;
+}
 .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
   --tw-exit-scale: .95;
 }
+.data-\[state\=open\]\:zoom-in-95[data-state=open] {
+  --tw-enter-scale: .95;
+}
 .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
   --tw-enter-translate-y: -0.5rem;
 }
@@ -3448,9 +3548,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-:is(.dark .dark\:hover\:bg-layoutPrimary-700:hover) {
-  background-color: var(--layout-primary-700);
-}
 :is(.dark .dark\:hover\:bg-primary\/10:hover) {
   background-color: hsl(var(--primary) / 0.1);
 }

package/src/translations/ar.json

@@ -20,7 +20,8 @@
   "signUpText": "تسجيل جديد",
   "signInText": "تسجيل الدخول",
   "createAccount": "أنشئ حساب",
-
+  "expandSidebar": "توسيع القائمة",
+  "collapseSidebar": "طي القائمة",
   "signInViaGoogleLabel": "الدخول بواسطة Google",
   "signInViaGithubLabel": "الدخول بواسطة Github",
   "signInViaTwitterLabel": "الدخول بواسطة Twitter",

package/src/translations/en.json

@@ -26,7 +26,8 @@
   "signUpViaGoogleLabel": "Sign up with Google",
   "signUpViaGithubLabel": "Sign up with Github",
   "signUpViaTwitterLabel": "Sign up with Twitter",
-
+  "expandSidebar": "Expand Sidebar",
+  "collapseSidebar": "Collapse Sidebar",
   "fullNameRequiredText": "Full name is required",
   "passwordTooShortText": "Password too short",
   "subscribeToNewsletter": "Subscribe to newsletter?",