gbs-add-block 1.0.1 → 1.0.4

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.1)
+# GBS Building Blocks 2.0 (v1.0.4)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,13 +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.1)
+## What's New 🎉 (Ver 1.0.4)
 
 - 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
+- Custom Components in SideBar and Mobile Screen Support
 
 ## Authors
 

package/package.json

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

package/source/components/sidebar/components/MenuSection.tsx

@@ -5,7 +5,7 @@ type MenuSectionProps = {
   section: MenuSectionType;
   sectionIndex: number;
   iconMap: Record<string, IconComponent>;
-  toggleItem: (sectionIndex: number, itemId: number) => void;
+  toggleItem: (sectionIndex: number, itemId: number | string) => void;
 };
 
 export const MenuSection = ({

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

@@ -4,7 +4,7 @@ import { MenuSection as MenuSectionComponent } from "./MenuSection";
 type SidebarMenuProps = {
   sections?: MenuSection[];
   iconMap: Record<string, IconComponent>;
-  toggleItem: (sectionIndex: number, itemId: number) => void;
+  toggleItem: (sectionIndex: number, itemId: number | string) => void;
 };
 
 export const SidebarMenu = ({

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

@@ -4,7 +4,7 @@ import { MenuData } from "../type";
 export const useSidebarState = (menuData: MenuData) => {
   const [sidebarData, setSidebarData] = useState<MenuData>(menuData);
 
-  const toggleItem = (sectionIndex: number, itemId: number): void => {
+  const toggleItem = (sectionIndex: number, itemId: number | string): void => {
     const newData = { ...sidebarData };
 
     const section = newData.sections?.[sectionIndex];

package/source/components/sidebar/index.tsx

@@ -4,20 +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 } = 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 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>
+      {/* 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>
   );
 }