fix: initial responsive state mobile hidden

bettyblocks · Oct 3, 2023 · 4dbd44f · 4dbd44f
1 parent 40d3e39
commit 4dbd44f
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/components/drawer.js b/src/components/drawer.js
@@ -5,6 +5,7 @@
   orientation: 'HORIZONTAL',
   jsx: (() => {
     const { Children, env, useText } = B;
+    const { useMediaQuery, useTheme } = window.MaterialUI.Core;
     const isEmpty = children.length === 0;
     const isPristine = isEmpty && env === 'dev';
     const {
@@ -20,11 +21,11 @@
 
     const isTemporary = drawerType === 'temporary';
     const anchor = isTemporary ? temporaryAnchor : persistentAnchor;
-
-    // Because custom boolean option returns false as a string, do an additonal check
-    const componentVisibility =
-      env === 'dev' ? visibility : runTimeVisibility !== 'false';
-
+    const aboveBreakpoint = useMediaQuery(
+      useTheme().breakpoints.up(breakpoint),
+    );
+    const showInRunTime = aboveBreakpoint && runTimeVisibility;
+    const componentVisibility = env === 'dev' ? visibility : showInRunTime;
     const [isOpen, setIsOpen] = useState(componentVisibility);
 
     const closeDrawer = () => setIsOpen(false);