@toptal/picasso-page 5.1.19 → 5.1.20

package/src/PageHamburger/PageHamburgerPortal.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const PageHamburgerPortal = ({ children }: Props) => {
-  const { showSidebarMenu, hamburgerRef } = useHamburgerContext()
+  const { hamburgerRef } = useHamburgerContext()
   const [container, setContainer] = React.useState<HTMLElement | null>(null)
   const [isMounted, setIsMounted] = React.useState<boolean>(false)
 
@@ -19,7 +19,7 @@ const PageHamburgerPortal = ({ children }: Props) => {
     }
   }, [hamburgerRef, isMounted])
 
-  if (!container || !showSidebarMenu) {
+  if (!container) {
     return null
   }
 

package/src/PageHamburger/index.ts

@@ -3,5 +3,4 @@ export { default as PageHamburgerPortal } from './PageHamburgerPortal'
 export {
   useHamburgerContext,
   PageHamburgerContextProvider,
-  useRegisterMenu,
 } from './PageHamburgerContext'

package/src/PageSidebar/PageSidebar.tsx

@@ -1,23 +1,17 @@
-import { useSidebar } from '@toptal/picasso-provider'
+import { useSidebar, usePageTopBar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
-import { ButtonCircular } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
-import { BackMinor16, ChevronRight16 } from '@toptal/picasso-icons'
 import { noop } from '@toptal/picasso-utils'
 
-import {
-  PageHamburgerPortal,
-  useHamburgerContext,
-  useRegisterMenu,
-} from '../PageHamburger'
+import { PageHamburgerPortal, useHamburgerContext } from '../PageHamburger'
 import { SidebarItem } from '../SidebarItem'
 import { SidebarLogo } from '../SidebarLogo'
 import { SidebarMenu } from '../SidebarMenu'
-import { SidebarContextProvider } from './SidebarContextProvider'
 import type { VariantType } from './types'
+import PageSidebarDesktop from './PageSidebarDesktop'
 
 export interface Props extends BaseProps {
   /** Style variant of Sidebar and subcomponents */
@@ -72,18 +66,12 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     onCollapse = noop,
   } = props
 
-  const { setHasSidebar } = useSidebar()
   const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed)
   const [isHovered, setIsHovered] = useState(false)
-  const [expandedItemKey, setExpandedItemKey] = useState<number | null>(null)
-  const { hasTopBar } = useHamburgerContext()
 
-  useEffect(() => {
-    // Clear expanded submenu on sidebar collapse
-    if (isCollapsed) {
-      setExpandedItemKey(null)
-    }
-  }, [isCollapsed])
+  const { setHasSidebar } = useSidebar()
+  const { hasPageHamburger } = useHamburgerContext()
+  const { hasTopBar } = usePageTopBar()
 
   useEffect(() => {
     setHasSidebar(true)
@@ -93,9 +81,7 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     }
   }, [setHasSidebar])
 
-  useRegisterMenu()
-
-  const handleCollapseButtonClick = useCallback(() => {
+  const handleCollapse = useCallback(() => {
     setIsCollapsed(previousState => !previousState)
     onCollapse()
   }, [setIsCollapsed, onCollapse])
@@ -134,50 +120,23 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
       onMouseEnter={collapsible ? () => setIsHovered(true) : noop}
       onMouseLeave={collapsible ? () => setIsHovered(false) : noop}
     >
-      <PageHamburgerPortal>{children}</PageHamburgerPortal>
-
-      <div
-        style={{
-          maxHeight: wrapperMaxHeight,
-        }}
-        className={twJoin(
-          'h-full',
-          !disableSticky &&
-            'max-h-[calc(100vh-var(--header-height,3.5rem))] sticky top-[var(--header-height,3.5rem)]'
-        )}
-      >
-        <Container
-          flex
-          direction='column'
-          className='scrollable-content h-full overflow-y-auto pt-4 pb-2 px-0'
-          data-testid={testIds?.scrollableContainer}
+      {hasPageHamburger ? (
+        <PageHamburgerPortal>{children}</PageHamburgerPortal>
+      ) : (
+        <PageSidebarDesktop
+          testIds={testIds}
+          variant={variant}
+          wrapperMaxHeight={wrapperMaxHeight}
+          disableSticky={disableSticky}
+          collapsible={collapsible}
+          defaultCollapsed={defaultCollapsed}
+          isCollapsed={isCollapsed}
+          isHovered={isHovered}
+          onCollapse={handleCollapse}
         >
-          {collapsible && (
-            <ButtonCircular
-              className={twMerge(
-                // TODO: [FX-XXXX] technical debt: button color/background/radius/shadow shouldn't be overwritten
-                'absolute -right-3 top-3 invisible text-graphite-700 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_0_8px_0_rgba(0,0,0,0.16)] z-[100] hover:text-white hover:bg-blue-500',
-                isHovered && 'visible'
-              )}
-              onClick={handleCollapseButtonClick}
-              icon={isCollapsed ? <ChevronRight16 /> : <BackMinor16 />}
-              aria-label='collapse sidebar'
-              variant='primary'
-              data-testid={testIds?.collapseButton}
-            />
-          )}
-          <div className='order-[50] flex-1 h-full' />
-          <SidebarContextProvider
-            isCollapsed={isCollapsed}
-            isHovered={isHovered}
-            variant={variant}
-            expandedItemKey={expandedItemKey}
-            setExpandedItemKey={setExpandedItemKey}
-          >
-            {children}
-          </SidebarContextProvider>
-        </Container>
-      </div>
+          {children}
+        </PageSidebarDesktop>
+      )}
     </Container>
   )
 })

package/src/PageSidebar/PageSidebarDesktop.tsx

@@ -0,0 +1,114 @@
+import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
+import type { ReactNode } from 'react'
+import React, { forwardRef, useState, useEffect } from 'react'
+import { ButtonCircular } from '@toptal/picasso-button'
+import { Container } from '@toptal/picasso-container'
+import { BackMinor16, ChevronRight16 } from '@toptal/picasso-icons'
+import { noop } from '@toptal/picasso-utils'
+
+import { SidebarContextProvider } from './SidebarContextProvider'
+import type { VariantType } from './types'
+
+export interface Props extends BaseProps {
+  /** Style variant of Sidebar and subcomponents */
+  variant?: VariantType
+  /** Content */
+  children?: ReactNode
+  /** Indicates Sidebar is collapsible */
+  collapsible?: boolean
+  /** Indicates Sidebar is collapsed as default */
+  defaultCollapsed?: boolean
+  /** Callback to notify when sidebar is having collapsed or default state */
+  testIds?: {
+    collapseButton?: string
+    container?: string
+    scrollableContainer?: string
+  }
+  /** Make sidebar scroll with the content */
+  disableSticky?: boolean
+  wrapperMaxHeight?: string | number
+  isHovered: boolean
+  isCollapsed: boolean
+  /** Callback when sidebar is collapsed */
+  onCollapse?: () => void
+}
+
+export const PageSidebarDesktop = forwardRef<HTMLDivElement, Props>(
+  function PageSidebarDesktop(props, ref) {
+    const {
+      children,
+      variant = 'light',
+      collapsible,
+      testIds,
+      wrapperMaxHeight,
+      disableSticky,
+      isHovered,
+      isCollapsed,
+      onCollapse = noop,
+    } = props
+
+    const [expandedItemKey, setExpandedItemKey] = useState<number | null>(null)
+
+    useEffect(() => {
+      // Clear expanded submenu on sidebar collapse
+      if (isCollapsed) {
+        setExpandedItemKey(null)
+      }
+    }, [isCollapsed])
+
+    return (
+      <div
+        style={{
+          maxHeight: wrapperMaxHeight,
+        }}
+        className={twJoin(
+          'h-full',
+          !disableSticky &&
+            'max-h-[calc(100vh-var(--header-height,3.5rem))] sticky top-[var(--header-height,3.5rem)]'
+        )}
+      >
+        <Container
+          flex
+          direction='column'
+          className='scrollable-content h-full overflow-y-auto pt-4 pb-2 px-0'
+          data-testid={testIds?.scrollableContainer}
+          ref={ref}
+        >
+          {collapsible && (
+            <ButtonCircular
+              className={twMerge(
+                // TODO: [FX-XXXX] technical debt: button color/background/radius/shadow shouldn't be overwritten
+                'absolute -right-3 top-3 invisible text-graphite-700 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_0_8px_0_rgba(0,0,0,0.16)] z-[100] hover:text-white hover:bg-blue-500',
+                isHovered && 'visible'
+              )}
+              onClick={onCollapse}
+              icon={isCollapsed ? <ChevronRight16 /> : <BackMinor16 />}
+              aria-label='collapse sidebar'
+              variant='primary'
+              data-testid={testIds?.collapseButton}
+            />
+          )}
+          <div className='order-[50] flex-1 h-full' />
+          <SidebarContextProvider
+            isCollapsed={isCollapsed}
+            isHovered={isHovered}
+            variant={variant}
+            expandedItemKey={expandedItemKey}
+            setExpandedItemKey={setExpandedItemKey}
+          >
+            {children}
+          </SidebarContextProvider>
+        </Container>
+      </div>
+    )
+  }
+)
+
+PageSidebarDesktop.defaultProps = {
+  variant: 'light',
+}
+
+PageSidebarDesktop.displayName = 'PageSidebarDesktop'
+
+export default PageSidebarDesktop

package/src/PageTopBar/PageTopBar.tsx

@@ -5,7 +5,9 @@ import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import {
   usePageTopBar,
+  useSidebar,
   usePreventPageWidthChangeOnScrollbar,
+  useScreenSize,
 } from '@toptal/picasso-provider'
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
@@ -23,6 +25,8 @@ import {
 } from '../PageHamburger'
 import styles from './styles'
 
+const SMALL_SCREEN_WIDTH = 1280
+
 type VariantType = 'dark' | 'light' | 'grey'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
@@ -79,26 +83,33 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
   const { setHasTopBar } = usePageTopBar()
   const { preventPageWidthChangeOnScrollbar } =
     usePreventPageWidthChangeOnScrollbar()
-  const { setHasTopBar: setHasTopBarHamburger, hasTopBar } =
-    useHamburgerContext()
 
   useIsomorphicLayoutEffect(() => {
     setHasTopBar(true)
 
-    return () => setHasTopBar(false)
+    return () => {
+      setHasTopBar(false)
+    }
   }, [setHasTopBar])
 
-  useEffect(() => {
-    setHasTopBarHamburger(true)
+  const { width, fullWidth } = useContext<PageContextProps>(PageContext)
 
-    return () => setHasTopBarHamburger(false)
-  }, [hasTopBar, setHasTopBarHamburger])
+  const { hamburgerId, setHasPageHamburger } = useHamburgerContext()
 
-  const { width, fullWidth } = useContext<PageContextProps>(PageContext)
-  const { hamburgerId } = useHamburgerContext()
+  const screenSize = useScreenSize()
+  const isSmallScreen = screenSize < SMALL_SCREEN_WIDTH
 
-  const isDark = ['dark', 'grey'].includes(variant)
+  const { hasSidebar } = useSidebar()
+
+  const showHamburger = isSmallScreen && (hasSidebar || !!centerContent)
 
+  useEffect(() => {
+    setHasPageHamburger(showHamburger)
+
+    return () => setHasPageHamburger(false)
+  }, [setHasPageHamburger, showHamburger])
+
+  const isDark = ['dark', 'grey'].includes(variant)
   const logoVariant = isDark ? 'white' : 'default'
   const logoDefault = (
     <>
@@ -150,10 +161,12 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
             {/*  Left part: Hamburger, Logo, Tagline, Search bar */}
             <div className={classes.left}>
               <Container flex alignItems='center' gap='small'>
-                <PageHamburger
-                  id={hamburgerId}
-                  data-testid={testIds?.hamburger}
-                />
+                {showHamburger && (
+                  <PageHamburger
+                    id={hamburgerId}
+                    data-testid={testIds?.hamburger}
+                  />
+                )}
                 {logoLink
                   ? React.cloneElement(logoLink, {}, logoComponent)
                   : logoComponent}
@@ -163,19 +176,18 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
             </div>
 
             {/* Center part: inline menu */}
-            {centerContent && (
-              <>
+            {centerContent &&
+              (isSmallScreen ? (
                 <PageHamburgerPortal>
                   <div className={classes.centerContentPortal}>
                     {centerContent}
                   </div>
                 </PageHamburgerPortal>
+              ) : (
                 <Container className={classes.centerContent}>
                   {centerContent}
                 </Container>
-              </>
-            )}
-
+              ))}
             {/* Right part: Action items, User menu, Notifications */}
 
             <div className={classes.right}>