@sikka/hawa 0.1.20 → 0.1.22

package/lib/layout/AppLayout.d.ts

@@ -16,6 +16,7 @@ type AppLayoutTypes = {
     profileMenuItems?: ProfileItem[];
     onSettingsClick?: () => void;
     DrawerFooterActions?: any;
+    clickedItem?: any;
     texts?: {
         expandSidebar?: string;
         collapseSidebar?: string;

package/lib/layout/Sidebar.d.ts

@@ -15,16 +15,13 @@ type SubItem = {
 interface SidebarGroupProps {
     title?: string;
     items: Item[];
-    collapsed?: any;
+    openedItem?: any;
+    setOpenedItem?: any;
     selectedItem?: any;
     isOpen?: boolean;
     onItemClick?: (value: string[]) => void;
     onSubItemClick?: (values: string[]) => void;
 }
-interface SidebarRootProps {
-    children: any;
-}
-declare const SidebarRoot: React.FC<SidebarRootProps>;
 declare const SidebarGroup: React.FC<SidebarGroupProps>;
 declare const SidebarItem: React.FC<{
     item: Item;
@@ -33,4 +30,4 @@ declare const SidebarItem: React.FC<{
     onSubItemClick?: (values: string[]) => void;
     isOpen?: boolean;
 }>;
-export { SidebarRoot, SidebarGroup, SidebarItem };
+export { SidebarGroup, SidebarItem };

package/package.json

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

package/src/layout/AppLayout.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { Button, DropdownMenu, Tooltip } from "../elements"
-import { SidebarGroup, SidebarRoot } from "./Sidebar"
+import { SidebarGroup } from "./Sidebar"
 
 type AppLayoutTypes = {
   /** The pages of the side drawer */
@@ -24,6 +24,7 @@ type AppLayoutTypes = {
   profileMenuItems?: ProfileItem[]
   onSettingsClick?: () => void
   DrawerFooterActions?: any
+  clickedItem?: any
   texts?: {
     expandSidebar?: string
     collapseSidebar?: string
@@ -59,12 +60,17 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
   drawerSize = "md",
   onSettingsClick,
   DrawerFooterActions,
+  currentPage,
+  clickedItem,
   ...props
 }) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
   const [openSubItem, setOpenSubitem] = useState("")
+  const [openedSidebarItem, setOpenedSidebarItem] = useState("")
   const { isOpen, onClose, onOpen } = useDiscloser(false)
-  const [collapsed, setCollapsed] = useState(false)
+  const [selectedItem, setSelectedItem] = useState(
+    currentPage ? currentPage : []
+  )
 
   const [keepOpen, setKeepOpen] = useState(false)
   const ref = useRef(null)
@@ -237,11 +243,10 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
         }}
         onMouseEnter={() => {
           setOpenSideMenu(true)
-          setCollapsed((prev) => !prev)
         }}
         onMouseLeave={() => {
           keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false)
-          setCollapsed((prev) => !prev)
+          setOpenedSidebarItem("")
         }}
         ref={ref}
       >
@@ -304,9 +309,7 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
          */}
         <div
           className={clsx(
-            // "no-scrollbar", TODO: make this optional to hide scrollbar or not
             "fixed bottom-14 top-14 bg-primary-foreground p-2 py-2 transition-all",
-            // bg-yellow-400
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
           style={{
@@ -323,21 +326,21 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
            * ----------------------------------------------------------------------------------------------------
            */}
 
-          <SidebarRoot>
-            <SidebarGroup
-              isOpen={openSideMenu}
-              onItemClick={(values) => {
-                console.log("Clicked main item value:", values[0])
-                // setSelectedItem(values)
-              }}
-              onSubItemClick={(values) => {
-                console.log("Parent item value:", values[0])
-                console.log("Subitem value:", values[1])
-                // setSelectedItem(values)
-              }}
-              items={props.drawerItems}
-            />
-          </SidebarRoot>
+          <SidebarGroup
+            onItemClick={(values) => {
+              setSelectedItem(values)
+              clickedItem(values)
+            }}
+            onSubItemClick={(values) => {
+              setSelectedItem(values)
+              clickedItem(values)
+            }}
+            selectedItem={selectedItem}
+            openedItem={openedSidebarItem}
+            setOpenedItem={(e) => setOpenedSidebarItem(e)}
+            isOpen={openSideMenu}
+            items={props.drawerItems}
+          />
         </div>
         {/*
          * ----------------------------------------------------------------------------------------------------

package/src/layout/Sidebar.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
 import { cn } from "../util"
+import { Button } from "../elements"
 
 const Accordion = AccordionPrimitive.Root
 
@@ -15,10 +16,16 @@ const AccordionItem = React.forwardRef<
 ))
 AccordionItem.displayName = "AccordionItem"
 
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Trigger
+> & {
+  showArrow?: any
+}
+
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  AccordionTriggerProps
+>(({ className, showArrow, children, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
@@ -26,21 +33,23 @@ const AccordionTrigger = React.forwardRef<
       {...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>
+      {showArrow && (
+        <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>
 ))
@@ -79,41 +88,34 @@ type SubItem = {
 interface SidebarGroupProps {
   title?: string
   items: Item[]
-  collapsed?: any
+  openedItem?: any
+  setOpenedItem?: 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,
+  openedItem,
+  setOpenedItem,
   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
+          value={openedItem}
           type="single"
-          // defaultValue="item-1"
+          onValueChange={(e) => {
+            setOpenedItem(e)
+          }}
           collapsible
           className="flex flex-col gap-1"
         >
@@ -142,26 +144,32 @@ const SidebarItem: React.FC<{
   const getSelectedStyle = (value: string, index: number) => {
     return isSelected && isSelected[index] === value
       ? "bg-primary text-primary-foreground  cursor-default"
-      : ""
+      : "hover:bg-primary/30"
   }
   if (item.subitems) {
     return (
       <AccordionItem value={item.value} className="overflow-x-clip">
         <AccordionTrigger
-          className={cn(getSelectedStyle(item.value, 0), "hover:bg-primary/30")}
+          className={cn(getSelectedStyle(item.value, 0))}
+          showArrow={isOpen}
         >
-          <div className={"flex flex-row items-center gap-2 "}>
+          <div
+            className={cn(
+              !isOpen && "py-1",
+              "flex w-fit flex-row items-center  gap-2"
+            )}
+          >
             {item.icon}
-            {/* {isOpen ? item.label : ""} */}
-
-            <span
-              className={cn(
-                "transition-all",
-                isOpen ? "opacity-100" : "opacity-0"
-              )}
-            >
-              {item.label}
-            </span>
+            {isOpen && (
+              <span
+                className={cn(
+                  "transition-all ",
+                  isOpen ? "opacity-100" : "opacity-0"
+                )}
+              >
+                {item.label}
+              </span>
+            )}
           </div>
         </AccordionTrigger>
         {item.subitems && (
@@ -171,6 +179,7 @@ const SidebarItem: React.FC<{
             >
               {item.subitems.map((subitem, idx) => (
                 <li
+                  key={idx}
                   onClick={(e) => {
                     e.stopPropagation()
                     if (onSubItemClick) {
@@ -178,10 +187,9 @@ const SidebarItem: React.FC<{
                     }
                   }}
                   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",
+                    "flex h-full cursor-pointer flex-row items-center gap-2 rounded bg-foreground/10 p-2 transition-all",
                     getSelectedStyle(subitem.value, 1)
                   )}
-                  key={idx}
                 >
                   {subitem.icon}
                   {subitem.label}
@@ -203,7 +211,7 @@ const SidebarItem: React.FC<{
         className={cn(
           triggerStyles,
           getSelectedStyle(item.value, 0),
-          "overflow-x-clip hover:bg-primary/30"
+          "overflow-x-clip "
         )}
       >
         <div className={"flex flex-row items-center gap-2 "}>
@@ -221,4 +229,4 @@ const SidebarItem: React.FC<{
     )
   }
 }
-export { SidebarRoot, SidebarGroup, SidebarItem }
+export { SidebarGroup, SidebarItem }

package/src/styles.css

@@ -2941,9 +2941,6 @@ body {
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
-.hover\:bg-foreground\/30:hover {
-  background-color: hsl(var(--foreground) / 0.3);
-}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));