diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx index c857dfb3b..18fb4dc42 100644 --- a/packages/lib/src/layout/ApplicationLayout.tsx +++ b/packages/lib/src/layout/ApplicationLayout.tsx @@ -35,7 +35,7 @@ const BodyContainer = styled.div<{ hasSidenav?: boolean }>` } `; -const SidenavContainer = styled.div<{ headerHeight: string; footerHeight: string }>` +const SidenavContainer = styled.div<{ headerHeight: string }>` width: fit-content; height: 100%; z-index: var(--z-app-layout-sidenav); @@ -45,7 +45,7 @@ const SidenavContainer = styled.div<{ headerHeight: string; footerHeight: string max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight || "0"})`}; @media (max-width: ${responsiveSizes.medium}rem) { width: 100%; - max-height: ${({ headerHeight, footerHeight }) => `calc(100vh - ${headerHeight || "0"} - ${footerHeight || "0"})`}; + max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight || "0"})`}; } `; @@ -65,7 +65,6 @@ const Main = ({ children }: AppLayoutMainPropsType): JSX.Element =>
{childr const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element => { const [headerHeight, setHeaderHeight] = useState("0px"); - const [footerHeight, setFooterHeight] = useState("0px"); const [hideMainContent, setHideMainContent] = useState(false); const handleHeaderHeight = useCallback( (headerElement: HTMLDivElement | null) => { @@ -77,16 +76,6 @@ const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: Appli [header] ); - const handleFooterHeight = useCallback( - (footerElement: HTMLDivElement | null) => { - if (footerElement) { - const height = footerElement.offsetHeight; - setFooterHeight(`${height}px`); - } - }, - [footer] - ); - const contextValue = useMemo(() => { return { logo, @@ -101,22 +90,20 @@ const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: Appli {header && {header}} - {sidenav && ( - - {sidenav} - - )} + {sidenav && {sidenav}} {!hideMainContent && {findChildType(children, Main)}} - - {footer ?? ( - - )} - + {!hideMainContent && ( + + {footer ?? ( + + )} + + )} );