feat: offset application content when sidebar is open (#3234)

City-of-Helsinki · Sep 6, 2024 · 0d7e32a · 0d7e32a
1 parent 7021896
commit 0d7e32a
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 4 deletions.
diff --git a/frontend/benefit/applicant/src/components/header/useHeader.ts b/frontend/benefit/applicant/src/components/header/useHeader.ts
@@ -42,6 +42,7 @@ const useHeader = (): ExtendedComponentProps => {
   >(null);
   const [isMessagesDrawerVisible, setMessagesDrawerVisiblity] =
     useState(openDrawer);
+  const { setIsSidebarVisible } = React.useContext(AppContext);
   const { pathname, asPath, query } = router;
 
   const languageOptions = React.useMemo(
@@ -84,6 +85,13 @@ const useHeader = (): ExtendedComponentProps => {
       application?.status || APPLICATION_STATUSES.DRAFT,
     [application]
   );
+
+  useEffect(() => {
+    if (isMessagesDrawerVisible !== null) {
+      setIsSidebarVisible(isMessagesDrawerVisible);
+    }
+  }, [isMessagesDrawerVisible, setIsSidebarVisible]);
+
   useEffect(() => {
     setHasMessenger(
       [

diff --git a/frontend/benefit/applicant/src/components/layout/Layout.sc.ts b/frontend/benefit/applicant/src/components/layout/Layout.sc.ts
@@ -2,13 +2,16 @@ import styled, { DefaultTheme } from 'styled-components';
 
 interface MainProps {
   $backgroundColor: keyof DefaultTheme['colors'];
+  $isSidebarVisible: boolean;
 }
 
 export const $Main = styled.main<MainProps>`
+  width: calc(100% - ${(props) => (props.$isSidebarVisible ? '520px' : '0px')});
   background-color: ${(props) =>
     props.$backgroundColor ? props.$backgroundColor : props.theme.colors.white};
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 100vh;
+  transition: width 0.225s ease-out;
 `;
diff --git a/frontend/benefit/applicant/src/components/layout/Layout.tsx b/frontend/benefit/applicant/src/components/layout/Layout.tsx
@@ -1,6 +1,7 @@
 import Header from 'benefit/applicant/components/header/Header';
 import TermsOfService from 'benefit/applicant/components/termsOfService/TermsOfService';
 import { IS_CLIENT, LOCAL_STORAGE_KEYS } from 'benefit/applicant/constants';
+import AppContext from 'benefit/applicant/context/AppContext';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import * as React from 'react';
@@ -43,6 +44,8 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
 
   const bgColor = selectBgColor(router.pathname);
 
+  const { isSidebarVisible } = React.useContext(AppContext);
+
   const isTermsRoute = ![
     ROUTES.ACCESSIBILITY_STATEMENT,
     ROUTES.COOKIE_SETTINGS,
@@ -59,7 +62,11 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
   }, []);
 
   return (
-    <$Main $backgroundColor={bgColor} {...rest}>
+    <$Main
+      $backgroundColor={bgColor}
+      $isSidebarVisible={isSidebarVisible}
+      {...rest}
+    >
       <Header />
       {isAuthenticated && isTermsRoute && !isTermsOfServiceApproved ? (
         <TermsOfService

diff --git a/frontend/benefit/applicant/src/context/AppContext.tsx b/frontend/benefit/applicant/src/context/AppContext.tsx
@@ -3,12 +3,16 @@ import React from 'react';
 
 export type AppContextType = {
   isNavigationVisible: boolean;
+  isSidebarVisible: boolean;
   setIsNavigationVisible: (value: boolean) => void;
+  setIsSidebarVisible: (value: boolean) => void;
 };
 
 const AppContext = React.createContext<AppContextType>({
   isNavigationVisible: false,
+  isSidebarVisible: false,
   setIsNavigationVisible: noop,
+  setIsSidebarVisible: noop,
 });
 
 export default AppContext;
diff --git a/frontend/benefit/applicant/src/context/AppContextProvider.tsx b/frontend/benefit/applicant/src/context/AppContextProvider.tsx
@@ -7,12 +7,16 @@ const AppContextProvider = <P,>({
 }: React.PropsWithChildren<P>): JSX.Element => {
   const [isNavigationVisible, setIsNavigationVisible] =
     React.useState<boolean>(false);
+  const [isSidebarVisible, setIsSidebarVisible] =
+    React.useState<boolean>(false);
 
   return (
     <AppContext.Provider
       value={{
         isNavigationVisible,
+        isSidebarVisible,
         setIsNavigationVisible,
+        setIsSidebarVisible,
       }}
     >
       {children}

diff --git a/frontend/benefit/handler/src/layout/Layout.sc.ts b/frontend/benefit/handler/src/layout/Layout.sc.ts
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 type MainProps = {
-  isSidebarVisible: boolean;
+  $isSidebarVisible: boolean;
 };
 
 export const $Main = styled.main<MainProps>`
+  width: calc(100% - ${(props) => (props.$isSidebarVisible ? '520px' : '0px')});
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 100vh;
-  width: calc(100% - ${(props) => (props.isSidebarVisible ? '520px' : '0px')});
   transition: width 0.225s ease-out;
 `;
diff --git a/frontend/benefit/handler/src/layout/Layout.tsx b/frontend/benefit/handler/src/layout/Layout.tsx
@@ -9,7 +9,7 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
   const { isSidebarVisible } = React.useContext(AppContext);
 
   return (
-    <$Main {...rest} isSidebarVisible={isSidebarVisible}>
+    <$Main {...rest} $isSidebarVisible={isSidebarVisible}>
       {children}
     </$Main>
   );