From 4dbd44f6b7d254fa0222bfd6596f1e54004af870 Mon Sep 17 00:00:00 2001
From: Gijs van Wichen <gijs.van.wichen@bettyblocks.com>
Date: Tue, 3 Oct 2023 17:05:33 +0200
Subject: [PATCH] fix: initial responsive state mobile hidden

---
 src/components/drawer.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/drawer.js b/src/components/drawer.js
index 770ffd2cb..5193e1cb0 100644
--- 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);