@visns-studio/visns-components 5.6.1 → 5.6.2

package/package.json

@@ -84,7 +84,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.1",
+    "version": "5.6.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/TableFilter.jsx

@@ -9,6 +9,7 @@ function TableFilter({
     type,
 }) {
     const [visibleChildren, setVisibleChildren] = useState(null);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
 
     useEffect(() => {
@@ -116,6 +117,9 @@ function TableFilter({
         if (collapsible && filtertype === 'parent') {
             setVisibleChildren(id);
         }
+
+        // Close mobile menu after selection on small screens
+        setMobileMenuOpen(false);
     };
 
     const renderContent = (d) => {
@@ -184,14 +188,40 @@ function TableFilter({
         }
     };
 
+    const toggleMobileMenu = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+    };
+
+    // Find active filter for mobile display
+    const activeFilter = filters.find((filter) => filter.show === true);
+    const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
+
     return (
-        <ul className={styles.tableFilter}>
-            {filters.map((item, key) => (
-                <React.Fragment key={'table-filter-' + key}>
-                    {renderContent(item)}
-                </React.Fragment>
-            ))}
-        </ul>
+        <div className={styles.tableFilterContainer}>
+            <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
+                <span className={styles.activeFilterLabel}>{activeLabel}</span>
+                <span
+                    className={`${styles.mobileMenuIcon} ${
+                        mobileMenuOpen ? styles.open : ''
+                    }`}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </div>
+            <ul
+                className={`${styles.tableFilter} ${
+                    mobileMenuOpen ? styles.mobileOpen : ''
+                }`}
+            >
+                {filters.map((item, key) => (
+                    <React.Fragment key={'table-filter-' + key}>
+                        {renderContent(item)}
+                    </React.Fragment>
+                ))}
+            </ul>
+        </div>
     );
 }
 

package/src/components/crm/styles/TableFilter.module.scss

@@ -1,8 +1,15 @@
+.tableFilterContainer {
+    width: 100%;
+    position: relative;
+    display: block;
+}
+
 .tableFilter {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 1rem;
+    width: 100%;
 }
 
 .collapsibleMenu {
@@ -51,3 +58,81 @@
     background: var(--item-color) !important;
     color: var(--paragraph-color) !important;
 }
+
+/* Mobile menu toggle button */
+.mobileToggle {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 15px;
+    background: var(--primary-color, #0b3b2e);
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 10px;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.activeFilterLabel {
+    font-weight: 600;
+    color: white;
+}
+
+.mobileMenuIcon {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 20px;
+    height: 14px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: white;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon.open span:nth-child(1) {
+    transform: translateY(6px) rotate(45deg);
+}
+
+.mobileMenuIcon.open span:nth-child(2) {
+    opacity: 0;
+}
+
+.mobileMenuIcon.open span:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
+
+/* Media queries for responsive design */
+@media (max-width: 1024px) {
+    .mobileToggle {
+        display: flex;
+    }
+
+    .tableFilter {
+        display: none;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    .tableFilter.mobileOpen {
+        display: block;
+        max-height: 1000px;
+        overflow-y: auto;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        margin-bottom: 10px;
+    }
+
+    .link {
+        padding: 12px 20px; /* Larger touch targets for mobile */
+    }
+}