@sikka/hawa 0.1.17 → 0.1.20

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 { Button, DropdownMenu, HawaMenu, Tooltip } from "../elements"
+import { Button, DropdownMenu, Tooltip } from "../elements"
 
 type HawaAppLayoutTypes = {
   /** The pages of the side drawer */
@@ -39,19 +39,13 @@ type SubItem = {
   value: string
   highlighted?: boolean
 }
-
 type Item = {
   label: string
   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
 > = ({
@@ -195,18 +189,6 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               </div>
             ) : null}
             {/* Profile Icon & Menu */}
-            {/* <HawaMenu
-              direction={direction}
-              withHeader={size > 600 ? false : true}
-              headerTitle={size > 600 ? "" : props.username}
-              headerSubtitle={size > 600 ? "" : props.email}
-              menuItems={props.profileMenuItems}
-              position={"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> */}
             <DropdownMenu
               triggerClassname="mx-2"
               align="end"
@@ -221,11 +203,15 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               }
               items={props.profileMenuItems}
               onItemSelect={(e) => console.log("selecting item ", e)}
-            />{" "}
+            />
           </div>
         </div>
       )}
-      {/* Drawer Container */}
+      {/*
+       * ----------------------------------------------------------------------------------------------------
+       * Drawer Container
+       * ----------------------------------------------------------------------------------------------------
+       */}
       <div
         className={clsx(
           "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip  transition-all",
@@ -249,7 +235,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         }
         ref={ref}
       >
-        {/* Drawer Header  */}
+        {/*
+         * ----------------------------------------------------------------------------------------------------
+         * Drawer Header
+         * ----------------------------------------------------------------------------------------------------
+         */}
         <div
           dir={direction}
           className={clsx(
@@ -262,7 +252,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? openDrawerWidth : 0}px`,
           }}
         >
-          {/* Full Logo */}
+          {/*
+           * ----------------------------------------------------------------------------------------------------
+           * Full Logo
+           * ----------------------------------------------------------------------------------------------------
+           */}
           <img
             className={clsx(
               "h-9  opacity-0 transition-all",
@@ -277,8 +271,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
             // )}
             src={props.logoLink}
           />
-
-          {/* Logo Symbol */}
+          {/*
+           * ----------------------------------------------------------------------------------------------------
+           * Logo Symbol
+           * ----------------------------------------------------------------------------------------------------
+           */}
           {size > 600 ? (
             <img
               className={clsx(
@@ -290,7 +287,11 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
             />
           ) : null}
         </div>
-        {/* Drawer Content Container */}
+        {/*
+         * ----------------------------------------------------------------------------------------------------
+         * Drawer Content Container
+         * ----------------------------------------------------------------------------------------------------
+         */}
         <div
           className={clsx(
             // "no-scrollbar", TODO: make this optional to hide scrollbar or not
@@ -306,7 +307,12 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? openDrawerWidth : 0}px`,
           }}
         >
-          {/* Drawer Items */}
+          {/*
+           * ----------------------------------------------------------------------------------------------------
+           * Drawer Items
+           * ----------------------------------------------------------------------------------------------------
+           */}
+
           {props.drawerItems?.map((dSection, dIndex) => (
             <div
               key={dIndex}
@@ -419,16 +425,19 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 )
               })}
               {dIndex !== props.drawerItems.length - 1 && (
-                <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center "></div>
+                <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 bg-red-500 text-center "></div>
               )}
             </div>
           ))}
         </div>
-        {/* Drawer Footer */}
+        {/*
+         * ----------------------------------------------------------------------------------------------------
+         * Drawer Footer
+         * ----------------------------------------------------------------------------------------------------
+         */}
         <div
           className={clsx(
-            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
-
+            "fixed bottom-0  flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
             direction === "rtl" ? "flex-row-reverse" : "flex-row"
           )}
           style={{
@@ -438,85 +447,56 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? openDrawerWidth : 0}px`,
           }}
         >
-          {size > 600 && DrawerFooterActions && openSideMenu ? (
+          {DrawerFooterActions && openSideMenu ? (
             <>{DrawerFooterActions}</>
           ) : null}
 
           {/* Expand Button */}
           {size > 600 && openSideMenu ? (
-            <div
-              className={clsx("w-fit transition-all")}
-              style={
-                isRTL
-                  ? {
-                      right: `${
-                        drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                          drawerSize
-                        ] - 35
-                      }px`,
-                    }
-                  : {
-                      left: `${
-                        drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                          drawerSize
-                        ] - 35
-                      }px`,
-                    }
+            <Tooltip
+              side={"left"}
+              delayDuration={500}
+              content={
+                keepOpen
+                  ? props.texts?.collapseSidebar || "Collapse Sidebar"
+                  : props.texts?.expandSidebar || "Expand Sidebar"
               }
             >
-              <div
-                dir={direction}
-                className={clsx(
-                  "relative left-0 top-0 transition-all",
-                  openSideMenu ? " opacity-100" : " opacity-0"
-                )}
+              <Button
+                variant="light"
+                onClick={() => setKeepOpen(!keepOpen)}
+                size="smallIcon"
               >
-                <Tooltip
-                  side={"left"}
-                  delayDuration={300}
-                  content={
+                <svg
+                  className={clsx(
+                    "h-6 w-6 shrink-0 text-primary   transition-all  disabled:bg-gray-200 ",
                     keepOpen
-                      ? props.texts?.collapseSidebar || "Collapse Sidebar"
-                      : props.texts?.expandSidebar || "Expand Sidebar"
-                    //  || "Expand Sidebar"
-                  }
+                      ? isRTL
+                        ? "-rotate-90"
+                        : "rotate-90"
+                      : isRTL
+                      ? "rotate-90"
+                      : "-rotate-90"
+                  )}
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
                 >
-                  <Button
-                    variant="light"
-                    onClick={() => setKeepOpen(!keepOpen)}
-                    size="icon"
-                  >
-                    <svg
-                      className={clsx(
-                        "h-8 w-8 shrink-0 text-primary   transition-all  disabled:bg-gray-200 ",
-                        // directionStyle
-                        keepOpen
-                          ? isRTL
-                            ? "-rotate-90"
-                            : "rotate-90"
-                          : isRTL
-                          ? "rotate-90"
-                          : "-rotate-90"
-                      )}
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      ></path>
-                    </svg>
-                  </Button>
-                </Tooltip>
-              </div>
-            </div>
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+              </Button>
+            </Tooltip>
           ) : null}
         </div>
       </div>
-      {/* 
-    
-      {/* Children Container */}
+      {/*
+       * ----------------------------------------------------------------------------------------------------
+       * Children Container
+       * ----------------------------------------------------------------------------------------------------
+       */}
       <div
         className="fixed overflow-y-auto"
         style={

package/src/layout/Sidebar.tsx

@@ -0,0 +1,224 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+
+import { cn } from "../util"
+
+const Accordion = AccordionPrimitive.Root
+
+let triggerStyles =
+  "flex flex-1 items-center cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90"
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(triggerStyles, className)}
+      {...props}
+    >
+      {children}
+      <svg
+        aria-label="Chevron Right Icon"
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="1"
+        viewBox="0 0 16 16"
+        height="1em"
+        width="1em"
+        className="h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+        ></path>
+      </svg>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+type Item = {
+  value: string
+  label: string
+  icon?: any
+  subitems?: SubItem[]
+  onClick?: () => void
+}
+type SubItem = {
+  value: string
+  label: string
+  icon?: any
+  onClick?: () => void
+}
+interface SidebarGroupProps {
+  title?: string
+  items: Item[]
+  collapsed?: any
+  selectedItem?: any
+  isOpen?: boolean
+  onItemClick?: (value: string[]) => void
+  onSubItemClick?: (values: string[]) => void
+}
+interface SidebarRootProps {
+  children: any
+}
+
+const SidebarRoot: React.FC<SidebarRootProps> = ({ children }) => (
+  <div className="flex flex-col gap-2">{children}</div>
+)
+const SidebarGroup: React.FC<SidebarGroupProps> = ({
+  title,
+  items,
+  selectedItem,
+  collapsed,
+  onItemClick,
+  onSubItemClick,
+  isOpen,
+}) => {
+  React.useEffect(() => {
+    if (collapsed) {
+      // Logic to close all groups
+    }
+  }, [collapsed])
+
+  return (
+    <div>
+      {title && <h3 className="mb-1 font-bold">{title}</h3>}
+      <ul className="flex flex-col gap-2">
+        <Accordion
+          type="single"
+          // defaultValue="item-1"
+          collapsible
+          className="flex flex-col gap-1"
+        >
+          {items.map((item, idx) => (
+            <SidebarItem
+              isOpen={isOpen}
+              isSelected={selectedItem}
+              key={idx}
+              item={item}
+              onItemClick={onItemClick}
+              onSubItemClick={onSubItemClick}
+            />
+          ))}
+        </Accordion>
+      </ul>
+    </div>
+  )
+}
+const SidebarItem: React.FC<{
+  item: Item
+  isSelected: any
+  onItemClick?: (value: string[]) => void
+  onSubItemClick?: (values: string[]) => void
+  isOpen?: boolean
+}> = ({ item, isSelected, onItemClick, onSubItemClick, isOpen = true }) => {
+  const getSelectedStyle = (value: string, index: number) => {
+    return isSelected && isSelected[index] === value
+      ? "bg-primary text-primary-foreground  cursor-default"
+      : ""
+  }
+  if (item.subitems) {
+    return (
+      <AccordionItem value={item.value} className="overflow-x-clip">
+        <AccordionTrigger
+          className={cn(getSelectedStyle(item.value, 0), "hover:bg-primary/30")}
+        >
+          <div className={"flex flex-row items-center gap-2 "}>
+            {item.icon}
+            {/* {isOpen ? item.label : ""} */}
+
+            <span
+              className={cn(
+                "transition-all",
+                isOpen ? "opacity-100" : "opacity-0"
+              )}
+            >
+              {item.label}
+            </span>
+          </div>
+        </AccordionTrigger>
+        {item.subitems && (
+          <AccordionContent className=" mt-1 h-full rounded  ">
+            <div
+              className={cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")}
+            >
+              {item.subitems.map((subitem, idx) => (
+                <li
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (onSubItemClick) {
+                      onSubItemClick([item.value, subitem.value])
+                    }
+                  }}
+                  className={cn(
+                    "flex h-full cursor-pointer flex-row items-center gap-2 rounded bg-foreground/10 p-2 transition-all hover:bg-foreground/30",
+                    getSelectedStyle(subitem.value, 1)
+                  )}
+                  key={idx}
+                >
+                  {subitem.icon}
+                  {subitem.label}
+                </li>
+              ))}
+            </div>
+          </AccordionContent>
+        )}
+      </AccordionItem>
+    )
+  } else {
+    return (
+      <div
+        onClick={() => {
+          if (onItemClick) {
+            onItemClick([item.value])
+          }
+        }}
+        className={cn(
+          triggerStyles,
+          getSelectedStyle(item.value, 0),
+          "overflow-x-clip hover:bg-primary/30"
+        )}
+      >
+        <div className={"flex flex-row items-center gap-2 "}>
+          {item.icon}
+          <span
+            className={cn(
+              "transition-all",
+              isOpen ? "opacity-100" : "opacity-0"
+            )}
+          >
+            {item.label}
+          </span>
+        </div>
+      </div>
+    )
+  }
+}
+export { SidebarRoot, SidebarGroup, SidebarItem }

package/src/layout/Sidebar2.tsx

@@ -0,0 +1,77 @@
+import {
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Accordion,
+} from "@radix-ui/react-accordion"
+import React from "react"
+import { cn } from "../util"
+
+type Item = {
+  value: string
+  label: string
+  icon?: any
+  subitems?: Item[]
+}
+
+interface SidebarGroupProps {
+  title: string
+  items: Item[]
+}
+interface SidebarRootProps {
+  children: any
+}
+
+const SidebarRoot: React.FC<SidebarRootProps> = ({ children }) => (
+  <div className="flex flex-col gap-2 rounded bg-red-200 p-2">{children}</div>
+)
+
+const SidebarGroup: React.FC<SidebarGroupProps> = ({ title, items }) => (
+  <div>
+    <h3 className="mb-1 font-bold">{title}</h3>
+    <ul className="flex flex-col gap-2">
+      {items.map((item, idx) => (
+        <SidebarItem key={idx} item={item} />
+      ))}
+    </ul>
+  </div>
+)
+
+const SidebarItem: React.FC<{ item: Item }> = ({ item }) => (
+  // <li className="rounded bg-red-400 p-2">
+  <Accordion
+    // className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
+    type="single"
+    defaultValue="item-1"
+    collapsible
+  >
+    <AccordionItem value={item.value}>
+      <AccordionTrigger
+        className={cn()
+        // "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        // className
+        }
+      >
+        <div className="flex flex-row items-center gap-2">
+          {item.icon}
+          {item.label}
+        </div>
+      </AccordionTrigger>
+
+      {item.subitems && (
+        <AccordionContent
+        //  className="flex flex-col gap-1 bg-blue-400"
+        >
+          {item.subitems.map((subitem, idx) => (
+            <li className="rounded bg-yellow-300 p-1" key={idx}>
+              {subitem.label}
+            </li>
+          ))}
+        </AccordionContent>
+      )}
+    </AccordionItem>
+  </Accordion>
+  // </li>
+)
+
+export { SidebarRoot, SidebarGroup, SidebarItem }

package/src/layout/index.ts

@@ -1,6 +1,7 @@
 export * from "./Box"
 export * from "./HawaBottomAppBar"
 export * from "./HawaSiteLayout"
+export * from "./AppLayout"
 export * from "./HawaAppLayout"
 export * from "./HawaAppLayoutSimplified"
 export * from "./HawaContainer"
@@ -8,3 +9,5 @@ export * from "./HawaGrid"
 export * from "./AppSidebar"
 export * from "./Footer"
 export * from "./Banner"
+// export * from "./Sidebar2"
+export * from "./Sidebar"