@visns-studio/visns-components 6.3.17 → 6.4.0

package/package.json

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

package/src/components/Navigation.jsx

@@ -1,10 +1,16 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
+    BarChart3,
+    Briefcase,
     Bug,
+    Building2,
     Calendar,
     CreditCard,
     FileText,
+    Home,
+    LayoutDashboard,
+    MapPin,
     Users,
     User,
     Search,
@@ -22,6 +28,28 @@ import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
 import styles from './styles/Navigation.module.scss';
 
+// Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
+// via its `icon` key, falling back to its `id`. Unknown names render
+// nothing, and the header layout never renders these, so existing nav
+// configs are unaffected.
+const NAV_ICONS = {
+    billing: CreditCard,
+    calendar: Calendar,
+    clients: Building2,
+    contacts: Users,
+    customers: Building2,
+    dashboard: LayoutDashboard,
+    files: FileText,
+    home: Home,
+    jobs: Briefcase,
+    phone: Phone,
+    reports: BarChart3,
+    safety: Shield,
+    settings: Settings,
+    sites: MapPin,
+    users: Users,
+};
+
 const SearchComponent = ({
     navigate,
     search,
@@ -199,6 +227,19 @@ function Navigation({
     const navigate = useNavigate();
     const currentPage = location.pathname.substr(1) || 'dashboard';
     const [isOpen, setOpen] = useState(false);
+
+    // The mobile drawer is a full-viewport fixed overlay; without a scroll
+    // lock the page behind it keeps scrolling under the user's thumb.
+    useEffect(() => {
+        if (isOpen) {
+            const previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = previousOverflow;
+            };
+        }
+        return undefined;
+    }, [isOpen]);
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
@@ -320,6 +361,10 @@ function Navigation({
 
     const renderNav = (n) => {
         let navItemClasses;
+        const NavItemIcon =
+            layout === 'simple' || layout === 'cms'
+                ? NAV_ICONS[n.icon || n.id]
+                : undefined;
 
         if (n.class.includes('active')) {
             navItemClasses =
@@ -372,6 +417,7 @@ function Navigation({
                                                     ? styles.active
                                                     : ''
                                             }
+                                            onClick={() => setOpen(false)}
                                         >
                                             {child.label}
                                         </Link>
@@ -391,7 +437,11 @@ function Navigation({
                 onMouseLeave={handleMouseLeave}
             >
                 {n.url ? (
-                    <Link to={n.url}>{n.label}</Link>
+                    // Close the mobile drawer when navigating; no-op for the
+                    // header layout where the drawer state is never opened.
+                    <Link to={n.url} onClick={() => setOpen(false)}>
+                        {n.label}
+                    </Link>
                 ) : (
                     <span title={n.label}>{n.label}</span>
                 )}