fixed some sidebar issues with mobile styles

orchestrated-io · Jul 27, 2021 · f00946b · f00946b
1 parent f18b922
commit f00946b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -258,6 +258,7 @@ export const mediaQueries = {
 export const appScale = {
   navBarSize: "54px",
   sidebarMaxWidth: "360px",
+  sidebarMobileHeight: "50vh",
   mobileNavMenuWidth: "250px"
 };