From 4389ceefea0dfe89dfb84df10e943de3eb7e97c4 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 28 Jun 2021 18:09:52 +0200
Subject: [PATCH] Don't open sidebar on click for smaller screens

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/layout/Sidebar/Bar.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index f6edac81b7..65da4d2d75 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, useMediaQuery } from '@material-ui/core';
 import clsx from 'clsx';
 import React, { useRef, useState, useContext, PropsWithChildren } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
@@ -82,6 +82,9 @@ export const Sidebar = ({
   children,
 }: PropsWithChildren<Props>) => {
   const classes = useStyles();
+  const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('md'),
+  );
   const [state, setState] = useState(State.Closed);
   const hoverTimerRef = useRef<number>();
   const { isPinned } = useContext(SidebarPinStateContext);
@@ -94,7 +97,7 @@ export const Sidebar = ({
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = undefined;
     }
-    if (state !== State.Open) {
+    if (state !== State.Open && !isSmallScreen) {
       hoverTimerRef.current = window.setTimeout(() => {
         hoverTimerRef.current = undefined;
         setState(State.Open);
@@ -122,6 +125,8 @@ export const Sidebar = ({
     }
   };
 
+  const isOpen = (state === State.Open && !isSmallScreen) || isPinned;
+
   return (
     <div
       className={classes.root}
@@ -133,13 +138,13 @@ export const Sidebar = ({
     >
       <SidebarContext.Provider
         value={{
-          isOpen: state === State.Open || isPinned,
+          isOpen,
         }}
       >
         <div
           className={clsx(classes.drawer, {
             [classes.drawerPeek]: state === State.Peek,
-            [classes.drawerOpen]: state === State.Open || isPinned,
+            [classes.drawerOpen]: isOpen,
           })}
         >
           {children}