@syscore/ui-library 1.16.0 → 1.17.0

package/client/components/ui/mobile-nav.tsx

@@ -39,6 +39,7 @@ interface MobileNavTriggerProps {
   label: string;
   /** If provided, fires this action instead of toggling the panel */
   onAction?: () => void;
+  disabled?: boolean;
   className?: string;
 }
 
@@ -211,25 +212,30 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   };
 
   return (
-    <motion.div
-      ref={panelRef}
-      className={cn("mobile-nav-panel", className)}
-      data-closed={!open || undefined}
-      style={{ height: heightMV }}
-    >
+    <>
+      {open && (
+        <div className="mobile-nav-overlay" onClick={close} aria-hidden />
+      )}
       <motion.div
-        className="mobile-nav-handle"
-        onPanStart={handlePanStart}
-        onPan={handlePan}
-        onPanEnd={handlePanEnd}
+        ref={panelRef}
+        className={cn("mobile-nav-panel", className)}
+        data-closed={!open || undefined}
+        style={{ height: heightMV }}
       >
-        <div className="mobile-nav-handle-bar" />
+        <motion.div
+          className="mobile-nav-handle"
+          onPanStart={handlePanStart}
+          onPan={handlePan}
+          onPanEnd={handlePanEnd}
+        >
+          <div className="mobile-nav-handle-bar" />
+        </motion.div>
+
+        <div ref={contentRef} className="mobile-nav-content">
+          {activeKey ? children(activeKey) : null}
+        </div>
       </motion.div>
-
-      <div ref={contentRef} className="mobile-nav-content">
-        {activeKey ? children(activeKey) : null}
-      </div>
-    </motion.div>
+    </>
   );
 };
 
@@ -244,6 +250,7 @@ const MobileNavTrigger = ({
   children,
   label,
   onAction,
+  disabled,
   className,
 }: MobileNavTriggerProps) => {
   const { activeKey, open, toggle, close } = useMobileNav();
@@ -260,6 +267,7 @@ const MobileNavTrigger = ({
   return (
     <button
       onClick={handleClick}
+      disabled={disabled}
       data-active={activeKey === value || undefined}
       className={cn("mobile-nav-trigger group", className)}
       aria-label={label}

package/client/global.css

@@ -3854,9 +3854,19 @@ body {
 .mobile-nav {
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+.mobile-nav-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.08);
+  z-index: 10;
 }
 
 .mobile-nav-panel {
+  position: relative;
+  z-index: 20;
   background-color: white;
   border-radius: 32px 32px 0 0;
   box-shadow:
@@ -3895,10 +3905,11 @@ body {
 }
 
 .mobile-nav-bar {
+  position: relative;
+  z-index: 20;
   border-top: 1px solid var(--color-gray-100);
   background-color: var(--color-gray-50);
   flex-shrink: 0;
-  min-height: 136px;
 }
 
 .mobile-nav-bar-inner {
@@ -3933,6 +3944,11 @@ body {
   color: var(--color-gray-900);
 }
 
+.mobile-nav-trigger:disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
 /* Pagination Styles */
 .pagination {
   margin-left: auto;

package/client/ui/MobileNav.stories.tsx

@@ -249,7 +249,7 @@ export const Default: Story = {
           <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
         </MobileNavTrigger>
         <MobileNavTrigger value="comments" label="Comments">
-          <MessageSquare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
         </MobileNavTrigger>
       </MobileNavBar>
     </MobileNav>
@@ -315,3 +315,37 @@ export const WithCustomAction: Story = {
   args: { children: null },
   render: () => <WithCustomActionRender />,
 };
+
+export const WithDisabledTrigger: Story = {
+  args: { children: null },
+
+  render: () => (
+    <MobileNav className="h-screen w-full bg-gray-50">
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          The &ldquo;Comments&rdquo; trigger is disabled because there are no
+          comments.
+        </p>
+      </div>
+
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="edit" label="Edits">
+          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments" disabled>
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+    </MobileNav>
+  ),
+};