fix(Sidebar): Sidebar now overlays page content

fix(Sidebar): Using context to transfer isOpen prop
Royal-Navy · Jul 23, 2024 · ea8515f · ea8515f
1 parent d2302b0
commit ea8515f
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 67 deletions.
diff --git a/...ges/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.stories.tsx b/...ges/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.stories.tsx
@@ -57,6 +57,7 @@ const StyledMain = styled.main`
   padding: 2rem;
   background-color: #c9c9c9;
   width: 100%;
+  height: 30rem;
 `
 
 const SimpleSidebarNav = () => (

diff --git a/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.tsx b/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
-import React, { useRef } from 'react'
+import React, { useRef, useContext, useLayoutEffect } from 'react'
 import { Transition } from 'react-transition-group'
 
 import { SidebarHandle } from './SidebarHandle'
 import { SidebarUserProps } from './SidebarUser'
 import { SidebarNotifications } from './SidebarNotifications'
 import { ComponentWithClass } from '../../../common/ComponentWithClass'
-import { SidebarContext, SidebarProvider } from './context'
+import { SidebarContext } from './context'
 import { NotificationsProps } from '../NotificationPanel'
 import { TRANSITION_TIMEOUT } from './constants'
 import { StyledSidebar } from './partials/StyledSidebar'
@@ -63,64 +63,53 @@ export const Sidebar = ({
   ...rest
 }: SidebarProps) => {
   const nodeRef = useRef(null)
+  const { isOpen, hasMouseOver, setHasMouseOver, setIsOpen } =
+    useContext(SidebarContext)
+
+  useLayoutEffect(() => {
+    setIsOpen(initialIsOpen)
+  }, [initialIsOpen, setIsOpen])
 
   return (
-    <SidebarProvider initialIsOpen={initialIsOpen}>
-      <SidebarContext.Consumer>
-        {({ isOpen, hasMouseOver, setHasMouseOver }) => (
-          <StyledSidebar
-            data-testid="sidebar"
-            isOpen={isOpen}
-            onMouseEnter={(_) => setHasMouseOver(true)}
-            onMouseLeave={(_) => setHasMouseOver(false)}
-            {...rest}
-          >
-            {classificationBar &&
-              React.cloneElement(classificationBar, {
-                isCondensed: !isOpen,
-                inSidebar: true,
-              })}
-            <Transition
-              nodeRef={nodeRef}
-              in={hasMouseOver}
-              timeout={0}
-              unmountOnExit
-            >
-              {(state) => (
-                <SidebarHandle ref={nodeRef} transitionStatus={state} />
-              )}
-            </Transition>
-            {title && (
-              <StyledHead data-testid="sidebar-head">
-                {icon && <StyledHeadIcon>{icon}</StyledHeadIcon>}
-                <Transition
-                  in={isOpen}
-                  timeout={TRANSITION_TIMEOUT}
-                  unmountOnExit
-                >
-                  {(state) => (
-                    <StyledHeadTitle $transitionStatus={state}>
-                      {title}
-                    </StyledHeadTitle>
-                  )}
-                </Transition>
-              </StyledHead>
+    <StyledSidebar
+      data-testid="sidebar"
+      $isOpen={isOpen}
+      onMouseEnter={(_) => setHasMouseOver(true)}
+      onMouseLeave={(_) => setHasMouseOver(false)}
+      {...rest}
+    >
+      {classificationBar &&
+        React.cloneElement(classificationBar, {
+          isCondensed: !isOpen,
+          inSidebar: true,
+        })}
+      <Transition nodeRef={nodeRef} in={hasMouseOver} timeout={0} unmountOnExit>
+        {(state) => <SidebarHandle ref={nodeRef} transitionStatus={state} />}
+      </Transition>
+      {title && (
+        <StyledHead data-testid="sidebar-head">
+          {icon && <StyledHeadIcon>{icon}</StyledHeadIcon>}
+          <Transition in={isOpen} timeout={TRANSITION_TIMEOUT} unmountOnExit>
+            {(state) => (
+              <StyledHeadTitle $transitionStatus={state}>
+                {title}
+              </StyledHeadTitle>
             )}
-            {children}
+          </Transition>
+        </StyledHead>
+      )}
+      {children}
 
-            {notifications && (
-              <SidebarNotifications
-                initialIsOpen={initialIsNotificationsOpen}
-                notifications={notifications}
-                hasUnreadNotification={hasUnreadNotification}
-              />
-            )}
+      {notifications && (
+        <SidebarNotifications
+          initialIsOpen={initialIsNotificationsOpen}
+          notifications={notifications}
+          hasUnreadNotification={hasUnreadNotification}
+        />
+      )}
 
-            {user}
-          </StyledSidebar>
-        )}
-      </SidebarContext.Consumer>
-    </SidebarProvider>
+      {user}
+    </StyledSidebar>
   )
 }
 

diff --git a/...ages/react-component-library/src/components/TopLevelNavigation/Sidebar/SidebarWrapper.tsx b/...ages/react-component-library/src/components/TopLevelNavigation/Sidebar/SidebarWrapper.tsx
@@ -2,9 +2,14 @@ import React from 'react'
 
 import { ComponentWithClass } from '../../../common/ComponentWithClass'
 import { StyledWrapper } from './partials/StyledWrapper'
+import { SidebarProvider } from './context'
 
 export const SidebarWrapper = (props: ComponentWithClass) => {
-  return <StyledWrapper data-testid="sidebar-wrapper" {...props} />
+  return (
+    <SidebarProvider>
+      <StyledWrapper data-testid="sidebar-wrapper" {...props} />
+    </SidebarProvider>
+  )
 }
 
 SidebarWrapper.displayName = 'SidebarWrapper'
diff --git a/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/context.tsx b/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/context.tsx
@@ -9,7 +9,6 @@ export interface SidebarContextDefaults {
 
 export interface SidebarProviderProps {
   children?: React.ReactNode
-  initialIsOpen?: boolean
 }
 
 const sidebarContextDefaults: SidebarContextDefaults = {
@@ -21,11 +20,8 @@ const sidebarContextDefaults: SidebarContextDefaults = {
 
 export const SidebarContext = createContext(sidebarContextDefaults)
 
-export const SidebarProvider = ({
-  children,
-  initialIsOpen = false,
-}: SidebarProviderProps) => {
-  const [isOpen, setIsOpen] = useState<boolean>(initialIsOpen)
+export const SidebarProvider = ({ children }: SidebarProviderProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
   const [hasMouseOver, setHasMouseOver] = useState<boolean>(false)
   const contextValue = useMemo(
     () => ({ isOpen, setIsOpen, hasMouseOver, setHasMouseOver }),

diff --git a/...ct-component-library/src/components/TopLevelNavigation/Sidebar/partials/StyledSidebar.tsx b/...ct-component-library/src/components/TopLevelNavigation/Sidebar/partials/StyledSidebar.tsx
@@ -4,22 +4,26 @@ import { color, zIndex } from '@royalnavy/design-tokens'
 import { StyledContent } from '../../../../primitives/FloatingBox/partials/StyledContent'
 
 interface StyledSidebarProps {
-  isOpen?: boolean
+  $isOpen?: boolean
 }
 
+export const SIDEBAR_OPEN_WIDTH = '18rem'
+export const SIDEBAR_CLOSED_WIDTH = '3.75rem'
+
 export const StyledSidebar = styled.aside<StyledSidebarProps>`
   display: inline-flex;
   flex-direction: column;
-  position: relative;
+  position: fixed;
   z-index: ${zIndex('sidebar', 0)};
   flex-shrink: 0;
-  width: ${({ isOpen }) => (isOpen ? '18rem' : '3.75rem')};
+  width: ${({ $isOpen }) =>
+    $isOpen ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH};
   height: 100vh;
   background-color: ${color('neutral', '700')};
   color: ${color('neutral', 'white')};
 
-  transition: ${({ isOpen }) =>
-    isOpen
+  transition: ${({ $isOpen }) =>
+    $isOpen
       ? '200ms width cubic-bezier(0.34, 1.56, 0.64, 1)'
       : '200ms width cubic-bezier(0.34, 1, 0.64, 1)'};
 

diff --git a/...ct-component-library/src/components/TopLevelNavigation/Sidebar/partials/StyledWrapper.tsx b/...ct-component-library/src/components/TopLevelNavigation/Sidebar/partials/StyledWrapper.tsx
@@ -1,6 +1,12 @@
 import styled from 'styled-components'
 
+import { SIDEBAR_CLOSED_WIDTH } from './StyledSidebar'
+
 export const StyledWrapper = styled.div`
   display: flex;
   flex-direction: row;
+
+  > *:nth-child(2) {
+    margin-left: ${SIDEBAR_CLOSED_WIDTH};
+  }
 `