console: Improve sidebar behavior

pkg/webui/components/header/header.styl

@@ -16,11 +16,11 @@
   padding: 0 $cs.m
   background: var(--c-bg-brand-extralight)
   z-index: $zi.nav
-  border-bottom: 1px solid var(--c-border-neutral-extralight)
   display: flex
   justify-content: space-between
   align-items: center
   height: 4rem
+  border-normal('bottom')
   +media-query($bp.xs)
     padding: 0 $cs.xs
 

pkg/webui/components/sidebar/side-header/index.js

@@ -33,12 +33,14 @@ const SideHeader = ({ Logo }) => {
       <Link to="/">
         <Logo className={classnames(style.logo)} />
       </Link>
-      <Button
-        className={classnames(style.minimizeButton, 'md-lg:d-none')}
-        icon={isMinimized ? IconX : IconLayoutSidebarLeftCollapse}
-        onClick={isMinimized ? closeDrawer : onMinimizeToggle}
-        naked
-      />
+      {!isMinimized && (
+        <Button
+          className={classnames(style.minimizeButton, 'md-lg:d-none')}
+          icon={IconLayoutSidebarLeftCollapse}
+          onClick={onMinimizeToggle}
+          naked
+        />
+      )}
       <Button
         className={classnames(style.minimizeButton, 'd-none', 'md-lg:d-flex')}
         icon={IconX}

pkg/webui/console/containers/sidebar/index.js

@@ -63,9 +63,13 @@ const Sidebar = ({ isDrawerOpen, isSideBarHovered, setIsHovered }) => {
     return () => clearTimeout(timer)
   }, [isSideBarHovered, closeDrawer, isDrawerOpen, isMinimized])
 
-  // Close the drawer on navigation changes.
+  // Close the drawer on navigation changes after a small delay.
   useEffect(() => {
-    closeDrawer()
+    const timer = setTimeout(() => {
+      closeDrawer()
+    }, 500)
+
+    return () => clearTimeout(timer)
   }, [pathname, closeDrawer])
 
   const handleSearchClick = useCallback(() => {

pkg/webui/console/containers/sidebar/sidebar.styl

@@ -12,17 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+$sidebar-width = 22rem
+
 .sidebar
   border-normal(right)
-  height: 100vh
   line-height: 1
   font-size: $fs.s
-  min-width: 22rem
-  max-width: 24rem
+  width: $sidebar-width
+  flex-shrink: 0
+  flex-grow: 0
   box-sizing: border-box
-  sidebar-transition(min-width)
+  left: 0
+  sidebar-transition(left)
   +media-query($bp.lg-xl)
-    transition: left .4s cubic-bezier(.22, .005, .295, 1)
     position: absolute
     top: 0
     left: -90vw
@@ -33,15 +35,14 @@
     z-index: $zi.mobile-menu
 
     &-open
-      transition: left .6s cubic-bezier(.165, .84, .44, 1)
       left: 0
 
       & + .sidebar-backdrop
         opacity: 1
         visibility: visible
 
   &-backdrop
-    transition: opacity .4s ease-in-out, visibility .4s ease-in-out
+    transition: opacity .3s ease-in-out, visibility .3s ease-in-out
     opacity: 0
     visibility: hidden
     position: fixed
@@ -50,21 +51,21 @@
     bottom: 0
     right: 0
     background: rgba(0, 0, 0, .7)
-    z-index: 1
+    z-index: $zi.mobile-menu - 1
     cursor: pointer
 
   &-minimized
-    transition: left .4s cubic-bezier(.22, .005, .295, 1)
     position: absolute
     top: 3.8rem
-    left: -90vw
+    left: - $sidebar-width
     bottom: 0
-    width: 90vw
-    min-width: 18rem
     height: calc(100vh - 3.8rem)
     z-index: $zi.mobile-menu
 
   &-open&.sidebar-minimized
-    transition: left .6s cubic-bezier(.165, .84, .44, 1)
     left: 0
-    box-shadow: 0 0 13rem 2rem rgba(0,0,0,.4)
+    box-shadow: 0 0 2rem 0 rgba(0,0,0,.05)
+
+    & + .sidebar-backdrop
+      opacity: .05
+      visibility: visible

pkg/webui/console/views/app/index.js

@@ -123,16 +123,13 @@ const Layout = () => {
 
   const handleMouseMove = useCallback(
     e => {
-      const timer = setTimeout(() => {
-        if (e.clientX <= 20 && isMinimized) {
-          // If the mouse is within 20px of the left edge
-          setIsDrawerOpen(true)
-        } else if (e.clientX >= 650 && isMinimized) {
-          // If the mouse is within 300px of the sidebar
-          setIsDrawerOpen(false)
-        }
-      }, 150)
-      return () => clearTimeout(timer)
+      if (e.clientX <= 20 && isMinimized) {
+        // If the mouse is within 20px of the left edge
+        setIsDrawerOpen(true)
+      } else if (e.clientX >= 550 && isMinimized) {
+        // If the mouse is within 300px of the sidebar
+        setIsDrawerOpen(false)
+      }
     },
     [isMinimized],
   )

pkg/webui/styles/mixins.styl

@@ -314,8 +314,8 @@ transition-color()
   transition: color $ad.xs
 
 sidebar-transition($properties)
-  transition-timing-function: cubic-bezier(.18,.71,.3,.99)
-  transition-duration: 0ms
+  transition-timing-function: cubic-bezier(.09, .515, .115, 1)
+  transition-duration: 350ms
   transition-property: $properties
 
 // Global classes attached by the sidebar component.