gbs-add-block 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.0)
+# GBS Building Blocks 2.0 (v1.0.2)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,12 +6,13 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 1.0.0)
+## What's New 🎉 (Ver 1.0.2)
 
 - Major Update with more stable features and Data Grid.
 - Deprecated Grid Component, Use New Data Grid instead.
 - More UI/UX Optimization.
 - Animation improvements. 
+- Custom Components in SideBar and Mobile Screen Support
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/sidebar/components/MenuItem.tsx

@@ -21,6 +21,18 @@ export const MenuItemComponent = ({
     }
   }, []);
 
+  if (item.type === "custom" && item.component) {
+    const CustomComponent = item.component;
+    return (
+      <li className="py-2 px-3 flex items-center text-sm text-gray-700">
+        <span className="mr-3">
+          <IconComponent />
+        </span>
+        <CustomComponent />
+      </li>
+    );
+  }
+
   return (
     <li>
       <a

package/source/components/sidebar/components/SidebarFooter.tsx

@@ -3,14 +3,9 @@ import { MenuItem, IconComponent } from "../type";
 type SidebarFooterProps = {
   footerItems?: MenuItem[];
   iconMap: Record<string, IconComponent>;
-  toggleProMode: () => void;
 };
 
-export const SidebarFooter = ({
-  footerItems,
-  iconMap,
-  toggleProMode,
-}: SidebarFooterProps) => {
+export const SidebarFooter = ({ footerItems, iconMap }: SidebarFooterProps) => {
   if (!footerItems) return null;
   if (!iconMap) return null;
 
@@ -20,28 +15,17 @@ export const SidebarFooter = ({
         {footerItems?.map((item) => {
           const IconComponent = iconMap[item.icon] || (() => null);
 
-          if (item.toggle) {
+          if (item.type === "custom" && item.component) {
+            const CustomComponent = item.component;
             return (
               <li
                 key={item.id}
-                className="flex items-center py-2 px-3 text-sm text-gray-700"
+                className="py-2 px-3 flex items-center text-sm text-gray-700"
               >
                 <span className="mr-3">
                   <IconComponent />
                 </span>
-                <span className="flex-grow">{item.name}</span>
-                <button
-                  onClick={toggleProMode}
-                  className={`w-10 h-5 flex items-center rounded-full p-1 ${
-                    item.active ? "bg-black" : "bg-gray-300"
-                  }`}
-                >
-                  <span
-                    className={`bg-white w-4 h-4 rounded-full shadow-md transform transition-transform ${
-                      item.active ? "translate-x-5" : ""
-                    }`}
-                  />
-                </button>
+                <CustomComponent />
               </li>
             );
           }

package/source/components/sidebar/components/SidebarMenu.tsx

@@ -11,6 +11,7 @@ export const SidebarMenu = ({
   sections,
   iconMap,
   toggleItem,
+  
 }: SidebarMenuProps) => {
   return (
     <div className="flex-grow overflow-y-auto px-4 py-2">

package/source/components/sidebar/hooks/useSidebarState.ts

@@ -19,20 +19,23 @@ export const useSidebarState = (menuData: MenuData) => {
     }
   };
 
-  const toggleProMode = (): void => {
+  const toggleMode = (): void => {
     const newData = { ...sidebarData };
     if (!newData.footer) return;
 
-    const proModeIndex = newData.footer.findIndex((item) => item.toggle);
-    if (proModeIndex === -1) return;
+    const toggleModeIndex = newData.footer.findIndex(
+      (item) => item.type === "toggle"
+    );
+    if (toggleModeIndex === -1) return;
 
-    newData.footer[proModeIndex].active = !newData.footer[proModeIndex].active;
+    newData.footer[toggleModeIndex].active =
+      !newData.footer[toggleModeIndex].active;
     setSidebarData({ ...newData });
   };
 
   return {
     sidebarData,
     toggleItem,
-    toggleProMode,
+    toggleMode,
   };
 };

package/source/components/sidebar/index.tsx

@@ -4,24 +4,74 @@ import { SidebarLogo } from "./components/SidebarLogo";
 import { SidebarMenu } from "./components/SidebarMenu";
 import { SidebarFooter } from "./components/SidebarFooter";
 import { UserProfile } from "./components/UserProfile";
+import Icon from "../icon/Icon";
+import { menuIcon, x } from "../icon/iconPaths";
+import { useState } from "react";
 
 export function Sidebar({ menuData, iconMap }: SidebarProps) {
-  const { sidebarData, toggleItem, toggleProMode } = useSidebarState(menuData);
+  const { sidebarData, toggleItem } = useSidebarState(menuData);
+  const [showSideBarMobile, setShowSideBarMobile] = useState(false);
 
   return (
-    <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200">
-      <SidebarLogo logo={sidebarData.logo} />
-      <SidebarMenu
-        sections={sidebarData.sections}
-        iconMap={iconMap}
-        toggleItem={toggleItem}
-      />
-      <SidebarFooter
-        footerItems={sidebarData.footer}
-        iconMap={iconMap}
-        toggleProMode={toggleProMode}
-      />
-      <UserProfile profile={sidebarData.profile} />
+    <div>
+      {/* Mobile menu button - only show when sidebar is closed */}
+      {!showSideBarMobile && (
+        <button
+          className="md:hidden flex items-center justify-between absolute p-4 border z-50 bg-white rounded-xl top-3 left-3"
+          onClick={() => setShowSideBarMobile(true)}
+        >
+          <Icon
+            elements={menuIcon}
+            svgClass={"stroke-black fill-none"}
+            dimensions={{ width: "18", height: "18" }}
+          />
+        </button>
+      )}
+
+      {/* Mobile sidebar overlay */}
+      {showSideBarMobile && (
+        <div
+          className="md:hidden fixed inset-0 z-40"
+          onClick={() => setShowSideBarMobile(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      <div
+        className={`md:hidden fixed left-0 top-0 h-screen bg-white w-64 border-r border-gray-200 z-40 transform transition-transform duration-300 ease-in-out ${
+          showSideBarMobile ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between pr-4">
+          <SidebarLogo logo={sidebarData.logo} />
+          <button onClick={() => setShowSideBarMobile(false)}>
+            <Icon
+              elements={x}
+              svgClass={"stroke-black fill-none"}
+              dimensions={{ width: "18", height: "18" }}
+            />
+          </button>
+        </div>
+        <SidebarMenu
+          sections={sidebarData.sections}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+        <SidebarFooter footerItems={sidebarData.footer} iconMap={iconMap} />
+        <UserProfile profile={sidebarData.profile} />
+      </div>
+
+      {/* Desktop sidebar */}
+      <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200 sticky left-0 top-0">
+        <SidebarLogo logo={sidebarData.logo} />
+        <SidebarMenu
+          sections={sidebarData.sections}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+        <SidebarFooter footerItems={sidebarData.footer} iconMap={iconMap} />
+        <UserProfile profile={sidebarData.profile} />
+      </div>
     </div>
   );
 }

package/source/components/sidebar/type.ts

@@ -1,20 +1,25 @@
 export type IconComponent = React.FC;
 
 export type MenuItem = {
-  id: number;
+  id: number | string;
   name: string;
   icon: string;
-  path: string;
+  path?: string;
   active?: boolean;
   expandable?: boolean;
   expanded?: boolean;
   badge?: string;
   toggle?: boolean;
+  type?: string;
+  component?: React.FC;
 };
 
 export type MenuSection = {
+  id?: number | string;
   title: string;
   items: MenuItem[];
+  component?: React.FC;
+  type?: string;
 };
 
 export type MenuData = {