From f00946b2e9b7870ae0f8817d7cb53ef02e774ba8 Mon Sep 17 00:00:00 2001
From: Adam Bottega <adambottega@gmail.com>
Date: Tue, 27 Jul 2021 17:48:01 +1000
Subject: [PATCH] fixed some sidebar issues with mobile styles

---
 lib/components/Sidebar/index.js | 16 +++++++++++-----
 lib/systemtheme.js              |  1 +
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/lib/components/Sidebar/index.js b/lib/components/Sidebar/index.js
index 1f0064b3..84a6d38d 100644
--- a/lib/components/Sidebar/index.js
+++ b/lib/components/Sidebar/index.js
@@ -23,10 +23,11 @@ const SidebarWrapper = styled("div")(
       alignContent: "stretch",
       "@media screen and (max-width: 900px)": {
         width: "100%",
-        height: "50vh",
+        height: "auto",
         minWidth: "auto",
         maxWidth: "initial",
         minHeight: "initial",
+        maxHeight: themeGet("appScale.sidebarMobileHeight")(props),
         position: "fixed",
         bottom: "0",
         left: "0",
@@ -49,7 +50,7 @@ export const SidebarTabs = styled("div")(
       justifyContent: "flex-start",
       textAlign: "center",
       "@media screen and (max-width: 900px)": {
-        height: "54px",
+        height: themeGet("appScale.navBarSize")(props),
         flexDirection: "row",
         minHeight: "initial",
         minWidth: "initial"
@@ -137,8 +138,12 @@ const SidebarPanelStyle = styled("div")(
         width: "100%",
         minWidth: "initial",
         maxWidth: "initial",
-        maxHeight: "calc(50vh - 54px)",
-        height: "calc(50vh - 54px)"
+        height:
+          "calc(" +
+          themeGet("appScale.sidebarMobileHeight")(props) +
+          " - " +
+          themeGet("appScale.navBarSize")(props) +
+          ")"
       }
     }),
   SidebarStyles
@@ -170,7 +175,8 @@ export const SidebarClose = styled("label")(
         top: "-10px",
         left: "calc(50% - 12px)",
         right: "auto",
-        transform: "rotate(-90deg)"
+        transform: "rotate(-90deg)",
+        cursor: "s-resize"
       }
     }),
   SidebarStyles
diff --git a/lib/systemtheme.js b/lib/systemtheme.js
index c5f197ba..ac4f0ab6 100644
--- a/lib/systemtheme.js
+++ b/lib/systemtheme.js
@@ -258,6 +258,7 @@ export const mediaQueries = {
 export const appScale = {
   navBarSize: "54px",
   sidebarMaxWidth: "360px",
+  sidebarMobileHeight: "50vh",
   mobileNavMenuWidth: "250px"
 };